またもや、
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.
というエラーが出た。
クライアント側でレンダリングされた仮想DOMツリーは、サーバーでレンダリングされたコンテンツと一致しません。これは、< p >内にブロックレベルの要素をネストしたり、< tbody >が欠落しているなど、誤ったHTMLマークアップが原因である可能性があります。ハイドレーションをベイルし、完全なクライアント側レンダリングを実行します。
今回はtableタグを使っていたので、そこが怪しいと思って調べてみると、
<table> <tr></tr> <tr></tr> <tr></tr> </table>
という感じでマークアップしていたが、tr要素を、thead要素、tbody要素、tfoot要素のいずれかでラップするとエラーが消えることがわかった。
<table> <tbody> <tr></tr> <tr></tr> <tr></tr> </tbody> </table>
あれ、tbody要素って必須だったけか？と思い、調べてみると、
< table > 要素をグラフィカルに表示するにあたり、< tbody > 要素は必須ではない子要素です。ただし、< table > 要素の子要素として < tr > 要素が存在する場合は tbody を配置してはいけません。
< tbody > を使用する場合、 < table > の直接の子として表の行 (< tr > 要素) 置くことはできませんが、 < tbody > の中には置くことができます。 < tbody > を使用する場合は、ヘッダーでもフッターでもない行をすべてその中に入れる必要があります。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody より引用
とのこと。
これを読むと、必須ではなさそうだし、むしろtable要素の直下にtr要素を置くことを推奨されている印象を受ける。
（実際はtbodyを置いたら、trはその中に置けということだと思う）
一応原文も確認してみると、
The < tbody > element is not a required child element for a parent < table > element to graphically render. However, it must not be present, if its parent < table > element has a < tr > element as a child.
If you use < tbody >, you can't also have table rows (< tr > elements) which are direct children of the < table > but not included inside the < tbody >. All non-header and non-footer rows must be inside the < tbody > if one is used.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody より引用
と、同じことが書いてある。
とまあ、本来必須の要素ではないようだが、Vueのレンダリング上では必須扱いになっているのかもしれない。
とりあえず、tbodyを入れてエラーが消えたので、今回はそれで良しとする。
