renderExternal with vueJS

[snimavat]

Trying to get virtual slides working with swiper element and vueJS.
But i am facing an issue, slides are not visible after initial few swipes. I have registered bug here

However, i find no documentation example of how renderExternal is supposed to be used.

Here's my implementation based on some googling : https://codesandbox.io/p/sandbox/frosty-rgb-cgkc94

Is it the way it is supposed to be done, or am i doing some thing wrong....

Thanks

[snimavat]

This is how i have done it.

<template>
  <div class="screen">
    <swiper-container init="false" ref="swiperEl">
      <swiper-slide v-for="(q, i) in virtualSlides.slides" :key="q.id">
        <div class="card">
          {{ q.content }}
        </div>
      </swiper-slide>
    </swiper-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const slides = ref([]);

//cerate 50 slides
for (let i = 0; i < 50; i += 1) {
  slides.value.push({ id: i, content: `Slide ${i}` });
}

console.log("Slides", slides.value);

const virtualSlides = ref({ slides: [] });

const swiperOpts = {
  slidesPerView: 1,
  speed: 40,
  height: "100%",
  spaceBetween: 16,
  virtual: {
    slides: slides.value,
    addSlidesAfter: 0,
    addSlidesBefore: 0,
    initialSlide: 3,
    renderExternal: (data) => {
      console.log("Virtual data", data.slides);
      virtualSlides.value.slides = data.slides.map((s) => {
        return slides.value[s.id];
      });
      console.log("virtualSlide", virtualSlides.value.slides);
    },
  },
};

const swiperEl = ref();

onMounted(() => {
  Object.assign(swiperEl.value, swiperOpts);
  swiperEl.value.initialize();
});
</script>

</style>

[snimavat]

@nolimits4web can you please help, i can give a PR for documentation, if i can get it working