Prevent default in Vue Splide

Question

I am using Vue with Splide slider. Everything worked great with hardcoded images, but now, using axios and GET method for my data, images look weird and they are moved to one side...

When I refresh that page, it goes back to normal.

Can I somehow add prevent default, defer or something similar?

<template>
  <div class="wrapper">
    <Splide
      aria-labelledby="thumbnail-example-heading"
      :options="mainOptions"
      ref="main"
    >
      <SplideSlide v-for="(slide, index) in slides" :key="slide">
        <img :src="slide" :alt="`img ${index + 1}`" />
      </SplideSlide>
    </Splide>

    <Splide
      aria-label="The carousel with thumbnails. Selecting a thumbnail will change the main carousel"
      :options="thumbsOptions"
      ref="thumbs"
    >
      <SplideSlide v-for="(slide, index) in slides" :key="slide">
        <img :src="slide" :alt="`img ${index + 1}`" />
      </SplideSlide>
    </Splide>
  </div>
</template>

<script setup>
...
const main = ref();
const thumbs = ref();
const slides = props.images;

const mainOptions = {
  type: "loop",
  perPage: 1,
  perMove: 1,
  gap: "1rem",
  pagination: true,
  autoWidth: true,
  arrows: false,
};

const thumbsOptions = {
  type: "slide",
  rewind: true,
  gap: "4px",
  pagination: false,
  fixedWidth: 90,
  fixedHeight: 70,
  cover: true,
  focus: "center",
  isNavigation: true,
  updateOnMove: true,
  arrows: false,
};
</script>