Vueでグローバルコンポーネントとローカルコンポーネントを同時に置きたい。

以下のようにapp.jsを記述するとheader.vueしか表示されずにrouterの内容が表示されません。

app.js

import Vue from 'vue'
import VueRouter from 'vue-router'

require('./bootstrap');

Vue.use(VueRouter)

Vue.component('head-bar', require('./components/layouts/HeadBar.vue'));

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: require('./components/View.vue') },
    ]
})

const app = new Vue({
    router,
    el: '#app'
});

.components/View.vue

<template>
    <div class="contents">
        <div class="contents-split">
            <div class="contents-split">
                <conference-room></conference-room>
            </div>
            <div class="contents-split">
                <conference-room></conference-room>
            </div>
        </div>
        <div class="contents-split">
            <div class="contents-spilt">
                <weather></weather>
            </div>
            <div class="contents-split">
                <notice></notice>
            </div>
        </div>
    </div>
</template>

<script>
    import ConferenceRoom from './view/ConferenceRoom'
    import Weather from './view/Weather'
    import Notice from './view/Notice'
    export default {
        components: {
            ConferenceRoom,
            Weather,
            Notice,
        },
        template: '<template>'
    }
</script>

./components/layouts/HeadBar

<template>
    <div class="header">
        <h1>header</h1>
    </div>
</template>

<script>
export default {
    template: '<template>'
}
</script>

app.blade.php

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>app</title>
        <link rel="stylesheet" href="{{ mix('css/app.css') }}"></script>
        <script>
            window.Laravel = {
                csrfToken: "{{ csrf_token() }}"
            };
        </script>
    </head>
    <body>
        <div id="app">
            <head-bar></header-bar>
            <router-view></router-view>
        </div>
    </body>
    <script src="{{ mix('js/app.js') }}"></script>
</html>