The swiper plug-in cannot be initialized in vue? - Codes Helper

THANKS FOR YOUR time!

parent component

<!--tab swiper-->
<li class="tab-item" v-for="(item,index) in processItems" @click="tabProcess(index)"
    :class="{active: processTabActiveIndex === index}">
    <span>{{item.title}}</span>
</li>


<div class="swiper-wrapper" v-show="processTabActiveIndex === 0">
    <Swiper :infoOfInitSwiper="infoOfInitSwiperOfProcessLeft" ref="swiperOfProcessLeft"></Swiper>
</div>
<div class="swiper-wrapper" v-show="processTabActiveIndex === 1">
    <Swiper :infoOfInitSwiper="infoOfInitSwiperOfProcessRight" ref="swiperOfProcessRight"></Swiper>
</div>



//                 swiper
infoOfInitSwiperOfProcessLeft: {
    id: "swiperOfProcessLeft",

    width: "100%",
    height: "600px",
    paginationShow: false,
    autoPlay: false,

    swiperImgUrl: [
        "/static/images/process/select.png",
        "/static/images/process/communication.png",
        "/static/images/process/check.png",
        "/static/images/process/sign_bargin.png"
    ]
},

//                 swiper
infoOfInitSwiperOfProcessRight: {
    id: "swiperOfProcessRight",

    width: "100%",
    height: "600px",
    paginationShow: false,
    autoPlay: false,


    swiperImgUrl: [
        "/static/images/process/quick_application.png",
        "/static/images/process/check.png",
        "/static/images/process/pay.png",
        "/static/images/process/bargin_complete.png",
    ]
},




//            process tab 
tabProcess: function (index) {
    this.processTabActiveIndex = index;

    if (index === 0) {
        this.$refs.swiperOfProcessLeft.refresh();
    }
    if (index === 1) {
        this.$refs.swiperOfProcessRight.refresh();
    }
},

components: {
    "Swiper": SwiperComponent,
    "Blue": BlueTitleBlock,
    "Footer": Footer
}

swiper components

<template>
    <div :id="infoOfInitSwiper.id" class="swiper-container" :style="createContainerStyle">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(imgUrl, index) in infoOfInitSwiper.swiperImgUrl" :style="createBackground(imgUrl)"></div>
        </div>


        <!--propboolean-->
        <div class="swiper-pagination" v-if="paginationShow"></div>
    </div>

</template>

<script type="text/ecmascript-6">
    export default{
        data: function () {
            return{
//                
                paginationShow: true

            }
        },


        props: {
            infoOfInitSwiper: {
                type: Object,
                default: {}
            },
        },

        created: function () {
            this.$nextTick(() => {
                this.__initSwiper();

            })


        },

        computed: {
            createContainerStyle: function () {
                return `width: ${this.infoOfInitSwiper.width}; height: ${this.infoOfInitSwiper.height};`;
            }
        },

        methods: {
//            
            createBackground: function (imgUrl) {
                return `background-image: url(${imgUrl});`
            },

            __initSwiper: function () {
                let __this = this;
                __this.swiper = new Swiper(`-sharp${__this.infoOfInitSwiper.id}`, {
                    autoplay: (__this.infoOfInitSwiper.autoPlay === true ? {
                        disableOnInteraction: false,
                        delay: 500
                    } : false),
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true
                    },
//                        
                    observer: true
                });

                __this.paginationShow = __this.infoOfInitSwiper.paginationShow;
            },

            refresh: function () {
//                if(this.swiper){
//                    console.log("");
//                    return
//                }
//
//                else{
//                    console.log("swiper");
//                }
                this.__initSwiper();
            }
        },




    }

</script>

<style lang="scss" scoped>
    @import "./swiper.scss";

</style>

the problem I have now is that the wrapper v-show=true component of the outer layer of the swiper component is normal, the other is abnormal for false, and the initialization of swiper fails. I guess it didn"t render, so it was reinitialized when tab was switched, but it didn"t work.

thanks for you help!