how do I turn autoplay on or off in Vue3.0 by double-clicking?

I want to turn autoplay on or off in Vue3.0 by double-clicking.I have tried many times, but I have never succeeded.

I want to use the method 'swiper.autoplay.stop()' to stop autoplay,but occer error "Uncaught TypeError: Cannot read property 'stop' of undefined'" .

please tell me what should i do. thanks.

this is my vue code.

<template>
  <swiper
    :pagination="{ clickable: true }"
    :grabCursor="grabCursor"
    :effect="effect"
    :loop="loop"
    :centeredSlides=true
    :autoplay="autoplay"
    @slideChange="onSlideChange"
    @doubleClick="ondblclick"
  >
    <swiper-slide v-for="item in arr" :key="item"><img :src="item" style="width: 100%;"></swiper-slide>
  </swiper>
</template>
<script>
import 'swiper/components/effect-cube/effect-cube.scss'
import SwiperCore, { EffectCube, Pagination, Autoplay } from "swiper"
import { Swiper, SwiperSlide } from 'swiper/vue'

SwiperCore.use([EffectCube, Pagination, Autoplay])

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      effect: 'cube',
      grabCursor: true,
      loop: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      autoplay: {
        delay: 4000,
        disableOnInteraction: false
      },
      arr: ['https://scpic.chinaz.net/files/pic/pic9/202101/apic30631.jpg']
    }
  },
  methods: {
    onSlideChange () {
    },
    ondblclick () {
    }
  }
}
</script>

<style scoped>
.swiper-container {
  width: 330px;
  height: 495px;
  margin-top: 20px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}
</style>