Swiper Slider UI Breaks on Page Reload

When initializing the slider in Vue3 and attempting to simulate an API failure with Network request blocking in Chrome DevTools, I encountered an issue where the Swiper UI breaks.

Scenario: API failure → Attempt to reload → UI breaks

enter image description here

Expected Result

enter image description here

Actual Result

enter image description here

Below is a code snippet for your reference:

export default {
  name: 'FixedQR',

  mounted() {
    this.getData()
    this.swiper = new Swiper(this.$refs.swiper, {
      slidesPerView: 'auto',
      watchSlidesProgress: true,
      centeredSlides: true,
      spaceBetween: 40,
      // Disable preloading of all images
      preloadImages: false,
      // Enable lazy loading
      lazy: true,
      observer: true,
      observeParents: true,

      on: {
        slideChange: () => {
          // Prefetch data when scrolling to last 3 objects in array
          if (this.swiper.realIndex === this.qrCodes.length - 3) {
            this.getMoreQR()
          }
        },
      },
    })
  },

Has anyone else experienced a similar situation and can provide a solution? Thanks!