Importación de componentes Vue con Webpack

Tengo una configuración de la aplicación Hello World Vue con Webpack y tengo el componente de la aplicación inicial funcionando y montado en el cuerpo. Aunque dentro de ese componente de la aplicación no puedo entender cómo usar más componentes que hice.

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>

Yo he tratado

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

En main.js y en la sección de script de app.vue, intenté usar

<top-bar></top-bar>

sin suerte

Creo que me falta cómo registrar el componente correctamente, como en los documentos de Vue que hace:

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

Pero creo que cuando uso webpack con vue-loader necesito hacer algo diferente.