separate-component.js

// Create a component, which is global and can be used anywhere
// in the application
const Hello = Vue.component(
    'Hello', // Name of the component
    { templdate: '<span>Hello</span>' } // Options object, which contains a template
)

new Vue({
    template: '<div><Hello/> there</div>', // Hardcoded 'Hello' is replated with the component
    el: '#app'
});

simple-vue-app.js

new Vue({
    template: '<div>Hello there</div>',
    el: '#app'
});

vue-component-sections.js

// This is where the html template for the component is defined
// Requireda
<template>
    <span class="hello">Hello there</span>
</template>

// This is where the Javascript for the component is defined
// Required
<script>
    export default { name: 'Hello' }
</script>

// This is where the css classes fot the component are defined
// Optional
<style>
    .hello {
        color: white;
    }
</style>