Ссылка на элемент не сохраняется в переменной во Vue

У меня есть <Swiper @swiper="onSwiper"></Swiper> и const swiperRef = ref(null). Когда я вывожу в лог swiperRef.value, то оно выводится всегда корректно, но когда хочу использовать какой-то метод, например slideTo, то после первого применения этого метода выводится ошибка. Вот контекст использования, пишу с помощью <script setup>:

//сам свайпер 
<Swiper ref="swiperRef" @swiper="onSwiper">
                 <SwiperSlide v-for="day in markedDays" :key="day.event"><span>{{ day.event }}</span><span>{{
                        day.date }}</span></SwiperSlide>
                </Swiper>
//Вот тут я использую нужный мне метод 
<div v-for="day in days" :key="day"
                            :class="{ 'marked': isMarked(day), 'active': isActive(day) }" class="calendar-day" @click="() => {
                                toggleActive(day);
                                slideToMarkedDay();
                            }">
                            {{ parseInt(day.split('-')[2]) }}
                        </div>
//Это инициализация 
const onSwiper = (swiper: Swiper) => {
    swiperRef.value = swiper;
    console.log(swiperRef.value);
}
//Вот функция, в которой я использую метод
const slideToMarkedDay = (day: string) => {
    if (swiperRef.value) {
        const markedDayIndex = markedDays.value.findIndex(markedDay => markedDay.date === day);
        if (markedDayIndex !== -1) {
            swiperRef.value.slideTo(markedDayIndex);
        }
    }
};

Я пытался с помощью onMounted инициализировать свайпер через new, пробовал менять местами свайпер с элементом, где я использую метод, но результат один - ошибка


Ответы (0 шт):