После перехода по маршруту vue-router(router-link) пропадает пагинация "vue-awesome-swiper"

Суть в том, что на главной странице расположен swiper с 5 элементами и с пагинацией, которая соответственно имеет 5 элементов. Но, после перехода по какой-либо ссылке router-link и возвращения на главную страницу - отображается только один элемент пагинации "vue-awesome-swiper". В чем может быть причина?

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
    name: 'SwiperElement',
    title: 'Swiper Element',
    components: {
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
    },
    data() {
        return {
            banners: [
                { src: require('../assets/img/slider-image.png'), number: 1 },
                { src: require('../assets/img/slider-image.png'), number: 2 },
                { src: require('../assets/img/slider-image.png'), number: 3 },
                { src: require('../assets/img/slider-image.png'), number: 4 },
                { src: require('../assets/img/slider-image.png'), number: 5 }
            ],
            swiperOption: {
                // Pagination
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: 'true'
                },
                // Navigation arrows
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                fadeEffect: {
                    crossFade: false
                }
            },
            slides: [
                {
                    src: require('../assets/img/slider-image.png'),
                    alt: 'slider-image'
                },
            ]
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper
        }
    },
    mounted() {
        console.log('Current Swiper instance object', this.swiper)
        this.swiper.slideTo(3, 1000, false)
    }
}
<template>
    <swiper ref="mySwiper" class="swiper" :options="swiperOption">
        <div v-swiper:mySwiper="swiperOption">
            <div class="swiper-wrapper">
                <swiper-slide class="swiper-slide" :key="banner.number" v-for="banner in banners">
                    <img :src="banner.src" alt="banner-img">
                </swiper-slide>
            </div>
            <!-- pagination -->
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </swiper>
</template>

Добавлю, что при этом навигация по элементам "swiper" работает и можно просматривать все изображения


Ответы (0 шт):