Eu tenho uma configuração de aplicativo Olá mundo Vue com o Webpack e tenho o componente App inicial funcionando e montado no corpo. Embora dentro desse componente do aplicativo eu não consiga descobrir como usar mais componentes que fiz.

main.js

import Vue from 'vue'
import App from './app.vue'

new Vue({ 
    el: 'body',
    components: { App }
})

app.vue

<template>
    <div class="message">{{ message }}</div>
</template>

<script>
    export default {
        data () {
            return {
                message: 'Hello World'
            }
        }
    }
</script>

eu tentei

import TopBar from './top-bar.vue'

No main.js e na seção de script do app.vue, tentei usar

<top-bar></top-bar>

sem sorte.

Acho que estou sentindo falta de como registrar o componente corretamente, como nos documentos do Vue:

Vue.component('top-bar', TopBar);

Mas acho que, ao usar o webpack com o vue-loader, preciso fazer algo diferente.