Why is the v-on:click event not working on all elements of a slick slider?

Question

Slick

This is how I hang events on the slider elements (they work only on the first scroll, if you make infinite, then on the second circle the elements are no longer clicked.

<slider>
        <div v-on:click="handleOpenGalleryPopup(index)" v-for="(img, index) in residential.images" class="slider-item"><img :src="img.small_image" :title="img.title"></div>
    </slider>

Here is the component with the slider

<template>
  <div class="slider-wrapper">
    <Slick
      ref="slick"
      :options="slickOptions"
      >
        <slot></slot>
    </Slick>
  </div>
</template>

<script>
import Slick from 'vue-slick';

export default {
  computed: {
    slickOptions() {
      return {
       slidesToShow: 4,
       nextArrow: `<div class="arrow-wraper next"><img src="/img/common/arrow-right.svg"></div>`,
       prevArrow: `<div class="arrow-wraper prev"><img src="/img/common/arrow-left.svg"></div>`,
      swipeToSlide: true,
       responsive: [
         {
           breakpoint: 992,
           settings: {
             slidesToShow: 3
           },
         },
         {
           breakpoint: 600,
           settings: {
             slidesToShow: 2
           },
         }
       ]
      }
        
    },
  },

  },
  components: {
    Slick
  }
}
</script>