Vue3项目中Embla Carousel的scrollNext函数无法正常工作的问题求助

大家好，我正在Vue3项目里搭建Embla Carousel轮播组件，但是遇到了个棘手的问题——scrollNext和scrollPrev函数完全没反应，点击按钮轮播根本不动。我已经按照文档写了基础配置，下面是我的代码：

脚本部分 #

<script setup>
import { onMounted } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
import Autoplay from 'embla-carousel-autoplay'

const [emblaRef, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay()])

function prevSlide () {
  emblaApi.value.scrollPrev()
}

function nextSlide () {
  emblaApi.value.scrollNext()
} 
</script>

模板部分 #

<template>
  <div class="embla" ref="emblaRef">
    <div class="embla__viewport">
      <div class="embla__container">
        <div class="embla__slide">
          <div class="embla__parallax">
            <div class="embla__parallax__layer">
              <img
                class="embla__slide__img embla__parallax__img"
                src="https://picsum.photos/1000/350?v=1"
                alt="轮播图1"
              />
            </div>
          </div>
        </div>
        <!-- 这里省略了其他轮播项 -->
    </div>
    <button @click="prevSlide">上一张</button>
    <button @click="nextSlide">下一张</button>
  </div>
</template>

我希望能解决这个按钮控制滚动的问题，同时还能保留Embla官方文档里的视差效果，有没有大佬能帮我找找问题出在哪呀？

备注：内容来源于stack exchange，提问作者Nick Bewley