HTML

<section class="store-gallery" id="gallery">
      <div class="container">
        <div class="row">
          <div class="col-lg-8" data-aos="zoom-in">
            <transition name="slide-fade" mode="out-in">
              <img :src="photos[activePhoto].url" :key="photos[activePhoto].id" alt="" class="w-100 main-image">
            </transition>
          </div>
          <div class="col-lg-2">
            <div class="row">
              <div class="col-3 col-lg-12 mt-2 mt-lg-0" v-for="(photo, index) in photos" :key="photo.id"
                data-aos="zoom-in" data-aos-delay="100">
                <a @click="changeActive(index)">
                  <img :src="photo.url" class="w-100 thumbnail-image" :class="{active: index == activePhoto}" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

CSS

.page-details .store-gallery {
  margin-top: 20px;
}
.page-details .store-gallery img {
  border-radius: 10px;
}
.page-details .store-gallery .thumbnail-image {
  margin-bottom: 20px;
  border: 2px solid transparent;
}
.page-details .store-gallery .thumbnail-image:hover, .page-details .store-gallery .thumbnail-image.active {
  border: 2px solid #ff7158;
}
.slide-fade-enter-active {
  transition: all 0.2s ease;
}

.slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave {
  transform: translateY(10px);
  opacity: 0.5;
}

JS

<script src="/vendor/vue/vue.js"></script>
  <script>
    var gallery = new Vue({
      el: "#gallery",
      mounted() {
        AOS.init();
      },
      data: {
        activePhoto: 0,
        photos: [
          {
            id: 1,
            url: "/images/product-details-1.jpg"
          },
          {
            id: 2,
            url: "/images/product-details-2.jpg"
          },
          {
            id: 3,
            url: "/images/product-details-3.jpg"
          },
          {
            id: 4,
            url: "/images/product-details-4.jpg"
          },
        ]
      },
      methods: {
        changeActive(id) {
          this.activePhoto = id;
        }
      }
    })
  </script>