[Glide warn]: Root element must be a existing Html node

[M-Barari]

i'm using vue-glide-js and have a get this error on one of my pages when route change. for example when i hit that page on url or refresh that page, everything is fine! but when go to that page via nuxt-link (router-link) i get [Glide warn]: Root element must be a existing Html node and selectorQuery of null .

<template>
    <div class="full_width mb-5">
        <div :style="sliderW">
            <v-skeleton-loader v-if="compSkeleton" type="image" class="skel" />
            <vue-glide class="slider-glide" v-bind="carouselOptions" ref="slider" @glide:mount-after="mm()" :key="key" :style="sliderVisibility">
                <vue-glide-slide style="position:relative; min-height: 20px;" v-for="(item,index) in items" :key="item+index">
                    <div class="slide_wrapper">
                        <a :href="slideLink(item.link)">
                            <img :src="item.imgLg" class="img-responsive slide_img" :alt="slideTitle(item.title)">
                        </a>
                    </div>
                </vue-glide-slide>
            </vue-glide>
        </div>
    </div>
</template>
<style>
.skel{
    height: 100%;
    position: absolute;
    width: 100%;
    background: #ffffff;
    z-index: 1;
    border-radius: 0px !important;
}
.v-skeleton-loader__image{
    height: 100%;
}
</style>
<script>
import skeletonhomeslider from "~/components/global/skeletons/skeletonhomeslider"
export default {
    props:['options'],
    components:{
        'skeletonhomeslider': skeletonhomeslider
    },
    data(){
        return{
            items: [],
            compSkeleton: true,
            imgSkeleton: true,
            key: 1,
            sliderVisibility: 'visibility:hidden;'
        }
    },
    computed:{
        skeletonHeight(){
            return this.$vuetify.breakpoint.width/3
        },
        sliderW(){
            return `width:100%;position:relative;min-height:${this.$vuetify.breakpoint.width/3}px;`
        },
        carouselOptions(){
            return{
                direction: this.lang.dir || process.env.SITE_DIRECTION,
                type: 'carousel',
                autoplay: 3000,
                hoverpause: true,
                bound: false,
                rewind: true,
                perView: 1,
                peek: { before: 0, after: 0 },
                bullet: true,
                gap: 0
            }
        },
    },
    methods:{
        mm(){
            setTimeout(() => {
                this.compSkeleton = false
                this.sliderVisibility = '';
            }, 1000);
        },
        slideLink(link){
            if(link && link !== 'null'){
                return link
            }
            return '#'
        },
        slideTitle(title){
            if(title && title !== 'null'){
                return title
            }
            return process.env.SITE_TITLE
        },
        imgLoaded(){
            this.imgSkeleton = false
        }
    },
    async fetch(){
        let res = await this.axiosFetch(`homelist/list/${this.options.item.id}/0/1`)
        if(this.resOk(res.status)){
            this.items = res.data
        }
    },
    created(){
        this.compSkeleton = true
    },
    mounted(){
        setTimeout(() => {
            // this.compSkeleton = false
        }, 1000);
    }
}
</script>

and one more thing. the code is for my slider component which i have two of it! one for desktop and one for mobile that i import base on device. the mobile one has class slide-glide-m on <vue-glide>