Vue之轮播图自动播放

<template>
  <section class="carousel-body">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(slide, index) in swiperList" :key="index">
        <section align="center"><img :src="slide" alt="" :style="calcWidth().style" /></section>
      </swiper-slide>
      <!-- <div class="swiper-scrollbar"></div> -->
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>
    <div class="swiper-button-prev" @click="prev"></div>
    <div class="swiper-button-next" @click="next"></div>
  </section>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';

export default {
  name: 'CarouselBig',
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    isAutoplay: {
      type: [Object, Boolean],
    },
    list: {
      type: Array,
    },
  },
  data() {
    return {
      swiperList: this.list,
      swiperOption: {
        autoplay: this.isAutoplay,
        initialSlide: 0, // 设定初始化时slide的索引
        slidesPerView: 1, // 设置slider容器能够同时显示的slides数量
        notNextTick: true,
        spaceBetween: 0, // 在slide之间设置距离
        loop: true, // 循环
        setWrapperSize: true,
        freeMode: true, // true则是自由模式，不会自动贴合滑动位置
        grabCursor: false, // 小手掌抓取滑动
        pagination: { el: '.swiper-pagination', clickable: true, type: 'bullets' }, // 分页按钮, 小圆点
        paginationClickable: true,
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  methods: {
    prev() {
      this.swiper.slidePrev();
    },
    next() {
      this.swiper.slideNext();
    },
    calcWidth() {
      return { style: 'width: 4rem; height: 4rem' };
    },
  },
};
</script>

<style scoped lang="scss">
.carousel-body {
  position: relative;

  .swiper-button-prev {
    left: 28%;
    right: auto;
  }
  .swiper-button-next {
    right: 28%;
    left: auto;
  }
  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 0.24rem;
  }
}
</style>

左边错，这种写法props传进来，没法重新渲染dom