@click not working with cloneNode(true)

I was recently working with something that I got really stuck on and basically I had some html that had vue attributes like @click and v-for. I had to clone them and that cloned content was appended to a container and all the content was showing up correctly but it seems the @click functionality was lost, although I did have a list of thumbnails so it seems the v-for was still working.

I had a block of code like this:

<div class="js-thumbs">
  <img class="js-product-image" 
           :class="{selected: zoom_image_index == imageIndex}"
            v-for="(image, imageIndex) in selected_product.images" 
            :src="_utils.resizeImage(image.src, 'x950')"
            @click="zoom_image_index = imageIndex" />
</div>

So I was getting a list of the thumbnail images but clicking them did nothing. The only way I could get it to work was using insertAdjacentElement. I’m wondering what isn’t working here with cloneNode.

@click directive puts an event listener on an element. When you clone nodes, you create a copy of them, but the listeners you attached to the original nodes are not copied. This strategy is used when you want to remove all event listeners from an element - you just create a copy using cloneNode and then substitute the original element with it’s copy.

Ok this is starting to make a bit of sense. So how could I re write this because with the @click event listener it’s setting the zoom_image_index to imageIndex

const _this = this
const thumbnails = document.querySelectorAll('.js-thumbs .js-product-image')
thumbnails.forEach((thumbnail, imageIndex) => {
  thumbnail.addEventListener('click', e =>  {
    // does not work as expected
    _this.zoom_image_index = imageIndex
  })
})