设置disableOnInteraction: false后，手动操作之后仍无法保持继续轮播状态

代码给老师看一下吧，我这个是子组件

<template>
    <div class="waper">
        <!-- v-if="list.length",可以解决一系列ajax相应于页面数据渲染之间的问题 -->
        <!-- 这句话的意思是，只有当数据获取到时，才开始渲染页面 -->
        <swiper ref="mySwiper" :options="swiperOptions" v-if="list.length">
            <swiper-slide v-for="(item, index) in list" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
    name: "HomeSwiper",
    props:{
        list:Array
    },
    data() {
        return {
            swiperOptions: {
                // pagination 后面和swiper组件绑定
                pagination: ".swiper-pagination",
                // loop:true 可以设置无缝滚动
                loop:true,
                autoplay:{
    　　　　　　　　/* 触摸滑动后是否继续轮播 */
                    disableOnInteraction: false
                },
                speed:2000
            },
        };
    }
};
</script>
<style lang="stylus" scoped>
// >>> 可以无视 scoped，直接穿透到全局样式定义
.waper >>> .swiper-pagination-bullet-active {
    background-color: #fff !important;
}
 
.waper {
    overflow: hidden;
    width: 100%;
    height: 0;
    // 导航栏的小圆点看不到时，设置这个padding-bottom 的值大一点，被遮住了
    padding-bottom: 39%;
    background-color: #eee;
 
    .swiper-img {
        width: 100%;
    }
}
</style>