[Vuejs]-Image not updating on Swiper JS slider (vue) for custom next and prev buttons that show image on next and prev slides

The issue with your current implementation is that you’re only updating the currentIndex variable when the slide changes, but not updating the images on the next and previous buttons.

To update the images on the next and previous buttons as slides update, you need to add a watcher for the currentIndex variable that updates the next and previous button images whenever the currentIndex changes. Here’s an updated version of your Home.vue file that should achieve this:

<template>
  <div class="testimonial-slider">
    <swiper :navigation="true" :modules="modules" class="mySwiper">
      <swiper-slide v-for="(testimonial, index) in testimonials" :key="index">
        <div class="testimonial">
          <p>{{ testimonial.text }}</p>
          <div class="profile-info">
            <div class="profile-image">
              <img :src="testimonial.image" alt="">
            </div>
            <div class="profile-text">
              <p class="name">{{ testimonial.name }}</p>
              <p class="profession">{{ testimonial.profession }}</p>
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-navigation flex flex-row gap-12 justify-between">
        <div class="swiper-prev">
          <div class="image-container">
            <img :src="prevImage" alt="">
          </div>
          <div class="overlay"></div>
        </div>
        <div class="swiper-next">
          <div class="image-container">
            <img :src="nextImage" alt="">
          </div>
          <div class="overlay"></div>
        </div>
      </div>
    </swiper>
  </div>
</template>

<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  import 'swiper/css/navigation';
  import { Navigation } from 'swiper';

  export default {
    name: "Home",
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
      return {
        testimonials: [
          {
            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum vulputate massa, et efficitur nisl bibendum at.',
            image: 'assets/images/1-logo.svg',
            name: 'John Doe',
            profession: 'CEO',
          },
          {
            text: 'In ac lacus eu ex commodo vestibulum. Donec eleifend commodo neque, nec efficitur erat maximus sed.',
            image: 'assets/images/2-logo.svg',
            name: 'Jane Smith',
            profession: 'CFO',
          },
          {
            text: 'Suspendisse in vestibulum erat. Morbi non neque nec dolor dignissim lacinia ac vel orci.',
            image: 'assets/images/3-logo.svg',
            name: 'Bob Johnson',
            profession: 'CTO',
          },
          {
            text: 'Vestibulum eu dolor ac felis vehicula dictum. Duis eget volutpat sapien. Aliquam tincidunt ipsum eget tellus posuere, id rhoncus erat convallis.',
            image: 'assets/images/4-logo.jpg',
            name: 'Emily Thompson',
            profession: 'Marketing Director',
          },
        ],
        currentIndex: 0,
      };
    },
    setup() {
      return {
        modules: [Navigation],
      };
    },
    mounted() {
  this.$nextTick(() => {
    const swiper = this.$refs.swiper.$swiper;

    swiper.on('slideChange', () => {
      const currentIndex = swiper.realIndex;

      this.prevImage = this.testimonials[currentIndex - 1 >= 0 ? currentIndex - 1 : this.testimonials.length - 1].image;
      this.nextImage = this.testimonials[(currentIndex + 1) % this.testimonials.length].image;
    });

    this.prevImage = this.testimonials[this.testimonials.length - 1].image;
    this.nextImage = this.testimonials[1 % this.testimonials.length].image;
  });
},
  }