我想在vuejs的图像上开始一个悬停的幻灯片放映

<template>
  <div>
    <div v-for="(image, index) in images" :key="index">
      <img :src="image.url" @mouseover="startSlideshow(index)" @mouseleave="stopSlideshow" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'image1.jpg' },
        { url: 'image2.jpg' },
        { url: 'image3.jpg' }
      ],
      slideshowInterval: null,
      currentSlideIndex: 0
    };
  },
  methods: {
    startSlideshow(index) {
      this.currentSlideIndex = index;
      this.slideshowInterval = setInterval(this.nextSlide, 2000);
    },
    stopSlideshow() {
      clearInterval(this.slideshowInterval);
    },
    nextSlide() {
      this.currentSlideIndex = (this.currentSlideIndex + 1) % this.images.length;
    }
  }
};
</script>