vue.js, nuxt.jsでtableを使った時の謎のエラーの対処法

シンプルなtableを作成するとエラーになる

<table border="1">
  <tr>
    <th>果物</th><th>味</th>
  </tr>
  <tr>
    <td>イチゴ</td><td>甘い</td>
  </tr>
  <tr>
    <td>レモン</td><td>酸っぱい</td>
  </tr>
</table>

上記のようなtableを作成すると下記のようなエラーが複数でる

error

vue.runtime.esm.js:587 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

warning

Mismatching childNodes vs. VNodes:  NodeList [tbody] (3) [VNode, VNode, VNode]

Parent ...

解決策

解決策はシンプル。tbodyを追加する

<table border="1">
  <tbody>
    <tr>
      <th>果物</th><th>味</th>
    </tr>
    <tr>
      <td>イチゴ</td><td>甘い</td>
    </tr>
    <tr>
      <td>レモン</td><td>酸っぱい</td>
    </tr>
  </tbody>
</table>