【Nuxt.js】「The client-side rendered virtual DOM tree is not matching」エラー

nuxt
1<template>
2  <div class="hoge">
3
4    <template v-if="$store.getters['hoge/hoge'].length > 0">
5      <section
6        v-for="(hogehoge, index) in $store.getters['hoge/hoge']"
7        :key="index"
8        class="hoge__item">
9
10        <div class="hoge__line">
11          <ul class="hoge__vol">
12            <li class="hoge__vol">
13              <i class="material-icons">hoge</i>
14              <span>{{ hogehoge.hoge }}</span>
15            </li>
16            <li class="hoge__vol">
17              <i class="material-icons">fuga</i>
18              <span>{{ hogehoge.fuga }}</span>
19            </li>
20            <li class="hoge__vol">
21              <i class="material-icon">hige</i>
22              <span>{{ hogehoge.hige }}</span>
23            </li>
24          </ul>
25        </div>
26        <h2 class="hoge__ttl">
27          <nuxt-link :to="`/hoge`">{{ hogehoge.title }}</nuxt-link>
28        </h2>
29
30      </section>
31    </template>
32    <p 
33      v-else
34      class="hoge__item--notContent">
35      データがありません
36    </p>
37  </div>
38</template>

上記のコードで以下のエラーが３件表示されます。

error
1The 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.