Как решить ошибку гидратации Nuxt.js?

Question

[Владимир Бандуристов]

Используя Nuxt.js подключаю плагин кастомного скролла. В папке plugins создал файл vuescroll.js и там разместил код:

import Vue from 'vue'
import vuescroll from 'vuescroll'

Vue.use(vuescroll, {
  ops: {
    bar: {
      onlyShowBarOnScroll: false,
      background: '#9898a3'
    }
  }
})

Далее этот файл указал в nuxt.config.js

plugins: [{ src: '~/plugins/vuescroll', mode: 'client' }]

А затем в него оборачиваю контент который строится из ссылок, данные для которых берутся из стора:

<vue-scroll>
   <a
              v-for="(category, index) in getCategoriesList"
              :key="index"
              class="desktop-menu__link"
              href="#"
              :class="currentOpen === category.id ? 'active' : ''"
              @click.prevent="setCurrentOpen(category.id)"
            >
              <span class="desktop-menu__ico">
                <svg width="18px" height="18px" class="icon">
                  <use :xlink:href="`#${category.ico}`"></use>
                </svg>
              </span>
              {{ category.name }}</a
            >
    </vue-scroll>

В итоге всё вроде бы работает, но в консоли выдается ошибка гидратации, как её можно пофиксить?

vue.runtime.esm.js?2b0e:619 [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.

Comments

[Alex]

Руки бы поотрывал всем кто использует кастомные скролы

[Владимир Бандуристов]

Alex, Да я бы и рад их не использовать, но это уже есть в дизайне и утверждено заказчиком, так что работаем с тем что есть.