Using the automatic carousel of Swiper Vue.js, even after the mouse is moved in, it will still carousel on its own

[fdf-hash]

Bug description
Using the automatic carousel of Swiper Vue.js, even after the mouse is moved in, it will still carousel on its own

Expected Behavior
Use the automatic carousel of Swiper Vue.js. After moving the mouse in, you want to stop the automatic carousel and continue with it when the mouse leaves

Actual Behavior
After the mouse is moved in, it still automatically rotates on its own

The code is as follows：

<template>
  <div class="overall-box">
    <ul class="overall-fund">
      <li v-for="(item, index) in fundList" :key="index">
        <span class="fund-label">{{ item.name }}:</span>
        <span class="fund-value">{{ item.value }}</span>
      </li>
    </ul>
    <div @mouseenter="stopAutoplay" @mouseleave="startAutoplay">
      <swiper
        direction="vertical"
        :loop="true"
        :loopAdditionalSlides="1"
        :autoplay-delay="1000"
        :autoplay="true"
        :centeredSlides="true"
        :modules="[Autoplay, EffectFade]"
        @slideChange="onSlideChange"
        ref="swiperRef"
      >
        <swiper-slide v-for="(slide, index) in slides" :key="index">
          <h2>{{ slide.title }}</h2>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Overall",
}
</script>
<script lang="ts" setup>
import {Swiper, SwiperSlide} from "swiper/vue"
import {Autoplay, EffectFade} from "swiper/modules"
import "swiper/css"
import {onMounted, ref} from "vue"
// @ts-ignore
const swiperRef = ref<Swiper | null>(null) 
// 使用ref()定义swiperRef
const fundList = $ref([
  {name: "资金总额", value: "2934.00万元"},
  {name: "占比", value: "20.32%"},
])

// const list = $ref([{ name: '农口' }, { name: '商贸文旅口' }, { name: '教育卫生口' }])

const slides = $shallowRef([
  {title: "Slide 1", content: "This is slide 1"},
  {title: "Slide 2", content: "This is slide 2"},
  {title: "Slide 3", content: "This is slide 3"},
  {title: "Slide 4", content: "This is slide 3"},
  {title: "Slide 5", content: "This is slide 3"},
])
const onSlideChange = (swiper: any) => {
  // console.log("slide change", slides[swiper.realIndex]?.title)
}

const stopAutoplay = () => {
  if (swiperRef._value) {
  console.log(swiperRef._value);
    swiperRef._value.stopAutoplay()
  }
}

const startAutoplay = () => {
  if (swiperRef._value) {
    swiperRef._value.startAutoplay()
  }
}

onMounted(() => {
  // 确保在组件挂载时初始化 swiperRef.value
  swiperRef.value = swiperRef.value || {}
})
</script>

Mouse in error:swiperRef._value.stopAutoplay is not a function

Swiper version
11.0.5

Platform/Target and Browser Versions
window,Chrome is already the latest version Version 120.0.6099.130 (official version) (64 bit)