【Vue】テンプレート直下のノードは1つのブロックレベル要素でないといけない

エラー例

👇このようなテンプレートだとコンパイルエラーになります。

sample.vue

<template>
  <h1>タイトル</h1>
  <div class="content">
    <p>コンテンツ</p>
    <ul>
      <li>abc</li>
      <li>xyz</li>
    </ul>
  </div>
</template>

ログ

Component template should contain exactly one root element.

テンプレートはどんな形式であるべきか

VueではないけどAngularJSの記事でテンプレートのroot element系エラーに関する似た内容を見つけたので参考にしました👇
カスタムディレクティブのテンプレートで"root element"なんたらのエラーが出た場合

要するに、テンプレート直下は一つの<div>や<form>等のブロックレベル要素でないといけないんですね〜。コンポーネントという概念が少し紐解けた気がします。

sample.vue

<template>
  <div class="below-template">
    <h1>タイトル</h1>
    <div class="content">
      <p>コンテンツ</p>
      <ul>
        <li>abc</li>
        <li>xyz</li>
      </ul>
    </div>
  </div>
</template>

ブロックレベル要素に具体的にどんなものが存在するかはコチラのリンクを参考にしてみてください。
ブロックレベル要素とインライン要素