Vue Js Images Slide easy to understand, based on existing example on the net I just Develop and simplify it it a little

vue-image-slide.js

<!-- HTML -->
<div id="app">
      <a @click.prevent="prevSlide()" href="#" id="prev-slide"
        ><i class="fas fa-chevron-right"></i
      ></a>
      <a @click.prevent="nextSlide()" href="#" id="next-slide"
        ><i class="fas fa-chevron-left"></i
      ></a>
     <div class="col-md-12 p-0 slide">
      <div v-for="slide in [currentSlider]" :key="slide.id">
        <img :src="currentImage.img" alt="" class="full" />
      </div>
    </div>
</div>


// Vue Script
new Vue({
  el: "#app",
    data() {
    return {
      slides: [
        {
          id: 1,
          img: "https://via.placeholder.com/468x100C/O%20https://placeholder.com/",
        },
        {
          id: 2,
          img: "https://via.placeholder.com/468x200C/O%20https://placeholder.com/",
        },
      ],
      currentSlider: 0,
      timer: 0,
    };
  },

  mounted: function() {
    this.startAutoSlide();
  },

  methods: {
    nextSlide() {
      this.currentSlider++;
      if (this.currentSlider >= this.slides.length) {
        console.log("Slide should be repeated");
      }
    },
    prevSlide() {
      this.currentSlider--;
    },
    startAutoSlide() {
      this.timer = setInterval(this.nextSlide, 4000);
    },
  },

  computed: {
    currentImage: function() {
      return this.slides[Math.abs(this.currentSlider) % this.slides.length];
    },
  },
})