Vue Routerを使用すると上手くレンダリングできない

Question

前提・実現したいこと

Vue Routerを使用してSPAを作成したいのですが、テンプレート内で最初に実行した値しか出力されません。テンプレート通りに出力するにはどうしたらいいでしょうか。
ご教授よろしくお願いします。

発生している問題・エラーメッセージ

"[Vue warn]: Error compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

該当のソースコード

<script type="text/x-template" id="home">
    <div>
        <h2>Home</h2>
        <ul>
            <li>
                <router-link to="/1">Component 1</router-link>
            </li>
        </ul>
    </div>
</script>

<script type="text/x-template" id="component1">
   <div>
        <h2>Component 1</h2>
        <button-counter></button-counter>
        <ul>
            <li>
                <router-link to="/">Home</router-link>
            </li>
        </ul>
    </div>
</script>

<div id="app">
    <h1>Basic Vue-Router</h1>

    <router-view></router-view>
</div>

const Home = {
    template: '#home'
}

Vue.component('button-counter', {
  name: "buttonCounter",
  data: function () {
    return {
      comment:"This is count button",
      count: 0
    }
  },
  template: '<p>{{comment}}</p><button v-on:click="count++">You clicked me {{ count }} times.</button>'
})


const Component1 = {
    template: '#component1'
};

const Component2 = {
    template: '#component2'
};

const routes = [
    { path: '', component: Home },
    { path: '/1', component: Component1 },
    { path: '/2', component: Component2 }
]

const router = new VueRouter({
    routes
});

new Vue({
    router
}).$mount('#app');