I want to make a custom carousel which displays multiple slides at once and moves by one slide on a button press. In the main view this is how it is defined:

<MultiItemCarouselComponent>
  <CarouselItemComponent title="i am the first child">
    I am some text content of the first slide
  </CarouselItemComponent>
  <CarouselItemComponent  title="i am the second child">
    I am some text content of the second slide
  </CarouselItemComponent>
  <!-- arbitrary number of additional items. This can also be other components or standard html elements -->
</MultiItemCarouselComponent>

The important part of the MultiItemCarouselComponent is as follows:

  <div class="container-fluid px-0 multi-item-carousel">
    <div class="d-inline-flex multi-item-carousel-inner" ref="multiItemCarouselContainer">
      <div class="me-3" v-for="(child, index) in childComponents" :key="index">
        <component :is="child" />
      </div>
    </div>
  </div>

With a button a trigger a function called transitionNext() in my script section. This will copy the first item of my child components to the end of the array and handle the animations:

<script setup>
import { useSlots, ref } from 'vue'

var slots = useSlots()
const childComponents = ref(null)
childComponents.value = slots.default()

const multiItemCarouselContainer = ref(null)
const translateAmount = 100 / (childComponents.value.length + 1)

function transitionNextFinished() {
  childComponents.value.shift()
  multiItemCarouselContainer.value.id = null
  multiItemCarouselContainer.value.style.transition = 'none'
  multiItemCarouselContainer.value.style.transform = 'none'
  multiItemCarouselContainer.value.removeEventListener('transitionend', transitionNextFinished)
}

function transitionNext() {
  var firstChildElement = childComponents.value[0]
  childComponents.value.push(firstChildElement)
  multiItemCarouselContainer.value.id = 'transitionNextElement'
  multiItemCarouselContainer.value.style.transition = 'transform .6s ease-in-out'
  multiItemCarouselContainer.value.style.transform = 'translateX(-' + translateAmount + '%)'
  multiItemCarouselContainer.value.addEventListener('transitionend', transitionNextFinished)
}
</script>

All of this works as expected…apart from the slot content of the CarouselItemComponent. After the transition is finished, these seem to be updated to their original order. This means after the transition the pages shows:

______________________  _______________________
|i am the last child |  |i am the first child |
|____________________|  |_____________________|
|I am some text      |  |I am some text       | ...
|content of the first|  |content of the second| 
| slide              |  | slide               |
______________________  _______________________

I am assuming this is due to some render update vue does under the hood and my way of copying and moving the last array item to the 0th position is problematic, but I am unsure how to solve this problem. The only solution a can come up with at the moment is to pass the content of the child components as parameter as well (just like the title), but I would like to keep the flexibility slots provide.