Vue3+TypeScript中Swiper垂直滑动异常问题求助

我在使用Vue3、TypeScript和Swiper Vue开发时，遇到垂直滑动异常：滑动一次后直接跳转到最后一张幻灯片，而非预期的下一张。

我的组件代码如下：

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
</script>

<template>
  <main>
    <swiper
      :direction="'vertical'"
    >
      <swiper-slide class="h-screen bg-yellow-100">
        1
      </swiper-slide>
      <swiper-slide class="h-screen bg-green-100">
        2
      </swiper-slide>
      <swiper-slide class="h-screen bg-orange-100">
        3
      </swiper-slide>
      <swiper-slide class="h-screen bg-violet-100">
        4
      </swiper-slide>
    </swiper>
  </main>
</template>

恳请各位开发者提供解决思路或方案。

内容的提问来源于stack exchange，提问作者Joel Enanod Jr