В моем слайдере не работает асинхронная загрузка слайдов. Как исправить?

Доброго времени суток!

У меня есть слайдер с шаблоном

<slider>
      <slide>1</slide>
      <slide>2</slide>
      <slide>3</slide>
</slider>

В таком виде все прекрасно работает :) Но мне нужно адаптировать его под загрузку слайдов с сервера. Сейчас в компоненте Slider я инициализирую слайды через слоты:

initSlides() {
  this.slides = this.$slots.default.filter((item) => item.componentOptions);

  this.slides.forEach((item, index) => {
    item.componentOptions.propsData.index = index;
  });
}

Этот метод вызывается в хуке created. Далее, структура шаблона, при подкгрузке слайдов из store (а оттуда соответственно из бд):

<slider :itemsToShow="4" :controls="true" :pagination="true" :autoPlay="false">
  
  <slide v-for="(screen, i) in screenshots" :key="'screen' + i">
    <img :src="screen" alt="">
  </slide>

</slider>

Screenshots - как раз массив, который подгружается из бд с помощью axios.

Возвращаясь к JS, я понимаю, что на момент хука created слайды (а точнее $slots.default) еще не прогрузились и не примонтированы, поэтому консоль ругается, что не может их отфильтровать и отсюда начинаются баги.

Получается, мне нужно изменить как-то этот кусочек кода, но пока не пойму как, помогите пожалуйста!

methods: {
  initSlides() {
    this.slides = this.$slots.default.filter((item) => item.componentOptions);

    this.slides.forEach((item, index) => {
      item.componentOptions.propsData.index = index;
    });
  }
},
created() {
  this.initSlides();
}