Vue.jsのコンポーネントのtemplateで複数要素を書いていつもハマってしまう

タイトルのとおりで、久しぶりにVue.jsを書くといつもハマってしまうのでメモ。

mycomponentというコンポーネントを作ります。

<div id="app">
    <mycomponent></mycomponent>
</div>

コンポーネントのtemplateで、無意識に次のように複数要素を書いてしまいます。

Vue.component('mycomponent', {
  template:`
    <h1>component</h1>
    <b>hello</b>
  `
})

var app = new Vue({
  el: '#app'
})

で、なんでhelloがでないんだーとなる。

ルート要素は単一でないといけないので、<div>などで囲う必要があります。

Vue.component('mycomponent', {
  template:`
    <div>
        <h1>component</h1>
        <b>hello</b>
    </div>
  `
})

var app = new Vue({
  el: '#app'
})

ちゃんと出ました。

「基礎から学ぶ Vue.js」の「SECTION 22 コンポーネントの定義方法」にしっかり書いてある！