Swipe做banner滑动块，使用组件作用域插槽传入一个数组，初始的时候数组值是空的，渲染的时候出错？

Question

Swipe做banner滑动块，使用组件作用域插槽传入一个news数组，初始的时候数组值是空的，渲染的时候出错,当news通过axios获取到更改后，DOM可以渲染出来，但是Swipe滑动不了。

父组件

template

<m-swipe swipeid="swipe01" :autoplay="3000" paginationDirection="right" paginationType="custom" effect="coverflow" :news="news">
              <template slot="swiper-con" scope="props">
              <div class="swiper-slide "><img :src="props.pictrue" alt=""></div>
              </template>
      </m-swipe>

js

data(){
        return{
            news:[]
        }
    }

<div class="swiper-container" :class="swipeid">
    <div class="swiper-wrapper">
      <slot name="swiper-con" v-for="newsitem in news" :pictrue="newsitem.pictrue"></slot>
    </div>
    <!-- 分页器 -->
    <div v-if="paginationShow" :class="{'swiper-pagination':pagination}" :style="{'text-align':paginationDirection}"></div>
  </div>

js

props：{
    news:{
       type:Array
      }
}

报错：

当获取到news后，

图片可以加载出来，滑动效果没有了。

当触发子组件热更新后：

求大神这个有什么解决办法吗？