有关vue+swiper动态改变数据，slide并不会改变的问题

最近在公司写活动页面时，要求点击四种商品目录，下面呈现不同的商品进行轮播。在这里我并没有创建四个swiper，而是在一个swiper里通过动态的更改data来实现功能。
html代码

            
              

                

                  
                  
                
                {{item.title}}
              
            
 

简单讲解下就是商品数据放在goodList里，通过点击四种商品目录，更改isIndex的值，来实现动态更改goodList对应的数值
但是，问题出现了，虽然我成功的改变了轮播的商品，不过因为我在swiperOption里设置了loop为true,导致轮播一轮后面的数据一直为goodList[isIndex]的数据
最后通过对swiper进行销毁重新加载的方法解决了这个问题
方法一

this.goodVisibility = false   //在html里通过v-if='goodVisibility '来控制
this.$nextTick(() => {
     this.goodVisibility = true
}

方法二

 this.$refs.goodSwiper.swiper.destroy()   //先销毁
 this.$refs.goodSwiper.mountInstance()   //后在加载