[Nuxt.js] Mismatching childNodes vs. VNodes

状況

• Consoleに以下エラーが出た。

Mismatching childNodes vs. VNodes:  
:
[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.

原因、対策

• p の中に div とかネスト構造がHTML規約に準じていない時に発生するようだが、今回の場合、HTMLのコメント表記が悪さしてたようだ。

• エラーになる例

<template>
    ：
    <!-- comment -->
    xxx
    ：
</template>

• エラーにならない例
  • pタグで囲っただけ

<template>
    ：
    <!-- comment -->
    <p>xxx</p>
    ：
</template>