use vue-swiper as a loop to set loop:true, but no response

<template>
  <div class="banner">
    <swiper
      :options="swiperOption"
      ref="mySwiper"
    >
      <!-- slides -->

      <swiper-slide v-for="list in bannerList">
        <img
          :src="list.imageUrl"
          alt=""
        >
      </swiper-slide>

      <!-- Optional controls -->
      <div
        class="swiper-pagination"
        slot="pagination"
      ></div>
      <div
        class="swiper-button-prev"
        slot="button-prev"
      ></div>
      <div
        class="swiper-button-next"
        slot="button-next"
      ></div>
      <div
        class="swiper-scrollbar"
        slot="scrollbar"
      ></div>
    </swiper>
  </div>
</template>
<script>
const axios = require("axios");
export default {
  name: "banner",
  data() {
    return {
      swiperOption: {
        loop: true,
        speed: 900,
        notNextTick: true,
        autoplay: true,
        preloadImages: false
        // some swiper options/callbacks
        //  swiper  api 
        // ...
      },
      bannerList: [] //banner
    };
  },
  mounted() {
    var _this = this;
    axios
      .get("http://192.168.1.30:3000/banner")
      .then(function(response) {
        // handle success
        console.log(response);
        _this.bannerList = response.data.banners;
        console.log(_this.bannerList);
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      })
      .then(function() {
        // always executed
      });
  },
  
};
</script>
<style scoped>
img {
  width: 100%;
}
</style>

this didn"t respond, and then I checked it myself and said that it was useful to add "bannerList.length > 0" to the parent element of v-for, but! After I added it, the whole list of rowing pictures was not rendered. How can I circulate the roulette?
ask the boss to answer, thank you!