[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.

nuxt.jsで下記の様なエラーが発生。
クライアントレンダリングでは問題無いが、サーバーサイドレンダリングでは表示が崩れていた。
ローカル上では警告だけで表示できていたものが、本番にデプロイするとレンダリングされず、あわや惨事に。

[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.

原因

下記のようなコーディングがダメみたい。

    <div>
      text
      <span>text</span>
      text
    </div>

↓

    <div>
      <span>text</span>
      <span>text</span>
      <span>text</span>
    </div>

このようにしたら直りました。