Swiper неправильно отображает изображения при загрузке с Vue. js

Question

Я использую vue. js и swiper для плагина instagram feed, над которым я работаю. После прочтения документации я могу использовать свойство virtual для загрузки изображений, которые будут использоваться внутри слайдера. Я сталкиваюсь со странной проблемой: когда загружается swiper, изображения не располагаются между ними, мне нужно коснуться навигационной стрелки, чтобы увидеть поле, примененное к изображениям (см. Прикрепленное изображение). Есть ли исправление?

//HTML

<div class="swiper-container swiper-feed" id="ig-feed">
        <div class="swiper-wrapper">
          <div v-for="img in feedImg" class="swiper-slide feed-img" v-bind:style="{ backgroundImage: 'url('+img.url+')' }" /></div>
        </div>
        <div class="swiper-button-prev "></div>
        <div class="swiper-button-next"></div>
      </div>

//JS code

const igFeed = new Vue({
      el: '#ig-feed',
      data: {
        feedImg: []
      },
      created: function(){

      },
      mounted: function(){
        this.loadSlides();
        this.initSwiper();
      },
      methods: {
        initSwiper: function(){
          const feedSwiper = new Swiper('.swiper-feed', {
            slidesPerView: 4,
            spaceBetween: 80,
            slidesPerGroup: 3,
            virtual: {
              cache: true,
              slides: this.feedImg,
              renderExternal: function(feedImg){
                this.feedImg = feedImg;
              }
            },
            //loop: true,
            autoplay: {
              delay: 5000
            },
            //loopFillGroupWithBlank: true,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          });
        },
        loadSlides: function()
        {
          axios.get(igfeed.profile_url).then( (response) => {
            //console.log(response);
            response.data.graphql.user.edge_owner_to_timeline_media.edges.forEach( (item ,i) => {
              //console.log(item.node.display_url);
              f = {
                url: item.node.display_url
              };
              this.feedImg.push(f);
            });
          });
        }
      }
    });

//CSS code

.ig-feed {
  height: 100%;
  width: 100%;
  /*padding: 2em 0 2em 0 !important;*/
}
.feed-img {
  height: 300px !important;
  width: 300px !important;
  background-position: center center;
  background-size: 100% 100%;
  filter: drop-shadow(2px 2px 4px black);
  margin: .5em 0 .5em 0;
  border-radius: 0.3em;
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}