mui+vue，data动态渲染轮播组件数据，轮播组件不能正常轮播。

试过论坛里说的几种方法，如今上传的代码，在轮播了第一张图后，后续的图就不再轮播了。

vue2.6.9+mui

/src/main.js
import Mui from 'vue-awesome-mui'
import 'vue-awesome-mui/mui/dist/css/mui.css'
// mount with global
Vue.use(Mui)

/src/components/HelloWorld.vue
<template>
<div class="hello">
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://img12.360buyimg.com/jrpmobile/jfs/t13465/324/2563794460/43029/3ffca963/5a421f83Ne8089231.jpg?width=750&height=320" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="http://img12.360buyimg.com/jrpmobile/jfs/t13744/11/2508939408/43213/58bfe502/5a421ff3N52d0a474.jpg?width=750&height=320" /></a></div>  
    <div class="mui-slider-item"><a href="#"><img src="http://img12.360buyimg.com/jrpmobile/jfs/t16138/325/817844900/36681/5d874455/5a422029Ncd678ea3.jpg?width=750&height=320" /></a></div>  
    <div class="mui-slider-item"><a href="#"><img src="http://img12.360buyimg.com/jrpmobile/jfs/t13465/324/2563794460/43029/3ffca963/5a421f83Ne8089231.jpg?width=750&height=320" /></a></div>  

    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://img12.360buyimg.com/jrpmobile/jfs/t13744/11/2508939408/43213/58bfe502/5a421ff3N52d0a474.jpg?width=750&height=320" /></a></div>  
  </div>  
</div>  

</div>

export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted:function(){
var gallery = mui('.mui-slider');
gallery.slider({
interval:1000//自动轮播周期，若为0则不自动播放，默认为0；
});
}
}
</script>