vue封装swiper组件轮播数量不对，错在哪了

想3张图片轮播结果有5张轮播，删除一个swiper组件就正常
项目结构：

img


运行结果：

img


```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>封装swiper</title>
        <link rel="stylesheet" type="text/css" href="lib/dist/css/swiper.css"/>
        <script src="lib/dist/js/swiper.js" type="text/javascript" charset="utf-8"></script>
        <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <swiper :key=datalist.length :loop="true">
                <swiper-item v-for="data of datalist" :key="data">
                    <img :src="data" >
                </swiper-item>
            </swiper>
            <swiper v-if=datalist.length>
                <swiper-item v-for="data of datalist" :key="data">
                    <img :src="data" >
                </swiper-item>
            </swiper>
        </div>
        <script type="text/javascript">
        Vue.component("swiperItem",{
            template:`
                <div class="swiper-slide">
                    <slot></slot>
                </div>
            `
        })
            Vue.component("swiper",{
                props:{
                    loop:{
                        type:Boolean,
                        default:false
                    }
                },
                template:`
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <slot></slot>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                        
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        
                        
                    </div>
                `,
                mounted(){
                    new Swiper ('.swiper-container', {
                        loop: this.loop, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                          el: '.swiper-pagination',
                        },
                        
                        // 如果需要前进后退按钮
                        navigation: {
                          nextEl: '.swiper-button-next',
                          prevEl: '.swiper-button-prev',
                        },
                    })
                }
            })
            var vm = new Vue({
                el:'#box',
                data:{
                    datalist:[]
                },
                mounted(){
                    setTimeout(()=>{
                        this.datalist = ["http://bpic.588ku.com/element_origin_min_pic/16/10/29/2ac8e99273bc079e40a8dc079ca11b1f.jpg","http://www.synchros.com.cn/files/01.jpg","http://www.synchros.com.cn/files/up2014521103946.jpg"];
                        console.log(this.datalist)
                    },2000)
                }
                
            })
        </script>
    </body>
</html>

只有3张图片呀？

setTimeout(()=>{
                        this.datalist = ["http://bpic.588ku.com/element_origin_min_pic/16/10/29/2ac8e99273bc079e40a8dc079ca11b1f.jpg","http://www.synchros.com.cn/files/01.jpg","http://www.synchros.com.cn/files/up2014521103946.jpg"];
                        console.log(this.datalist)
                    },2000)

img