`currentSlide` undefined on mount with carousel later snapping into place

[JohnENoonan]

Describe the bug I have a carousel which is created from a list of objects (which only stores 2 strings) stored via pinia state management. When loading the page the carousel is in-between slides and after about a second or so it snaps to the correct modelValue. I've tried setting the modelValue to a static integer but the carousel still initializes in-between slides and snaps back.

When printing onMount the modelValue is set correctly but the currentSlide is undefined. Additionally I've confirmed my pinia objects are correct and non-null.

Thanks for any help 😄! To Reproduce

<Carousel
	:itemsToShow="3"
	:wrapAround="true"
	:transition="500"
	:modelValue="piniaStore.initialSlide"
	ref="myCarousel"
	@slide-start="handleSlide"
>
	<Slide v-for="(option, index) in piniaStore.options" :key="option">
            <div class="carousel__item">
	            <h1 > {{ option.name }}  </h1>
            </div>
	</Slide>
</Carousel>

.carousel__slide {
	padding: 5;
}
.carousel__viewport {
	perspective: 2000px;
}
.carousel__track {
	transform-style: preserve-3d;
}
.carousel__slide--sliding {
	transition: 0.5s;
}
.carousel__slide {
	opacity: 0.9;
	transform: rotateY(-20deg) scale(var(--filter-other-scale));
}
.carousel__slide--active ~ .carousel__slide {
	transform: rotateY(20deg) scale(var(--filter-other-scale));
}
.carousel__slide--prev {
	opacity: var(--filter-other-opacity);
	transform: rotateY(-10deg) scale(var(--filter-other-scale));
}
.carousel__slide.carousel__slide--next {
	opacity: var(--filter-other-opacity);
	transform: rotateY(10deg) scale(var(--filter-other-scale));
}
.carousel__slide--active {
	opacity: 1;
	transform: rotateY(0) scale(1);
}

// pinia values on mount for example
// piniaStore.options = [{name: "option 1", date: "date 1"}, {name: "option 2", date: "date 2"}, etc.];
// piniaStore.initialSlide = 0;    

Expected behavior The carousel will be initialized with the first slide being the one set as modelValue and currentSlide will be set to be equal to modelValue

Desktop (please complete the following information):

• OS: Windows
• Browser: chrome
• Version: 127.0.6533.100