How to solve the error of hydration Nuxt.js?

Using Nuxt.js connect plugin for custom scroll. In the plugins folder created the file vuescroll.js and there put the code:
import Vue from 'vue'
import vuescroll from 'vuescroll'

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

Further, the file indicated in nuxt.config.js
plugins: [{ src: '~/plugins/vuescroll', mode: 'client' }]

And then wrap the content which is built from references, data for which are taken from store:
<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>


In the end, everything seems to be working, but in console error of hydration and how it can be fixed?
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.
April 7th 20 at 11:02
0 answer

Find more questions by tags Nuxt.js