Why doesn't Vue's v-for loop work for hidden blocks?

Question

Vue.js

There is an array, in the template, blocks with information from the array are displayed through v-for. Each of the blocks has pop-ups hidden through v-if. The problem is that when you open any popup from the loop, it displays information from the last element of the array. How to fix it?

<div class="watch-box" v-for="(watch, index) in watches" :key="index">
<div @click.self="openColors()" v-if="isColor" class="callback-overlay" v-cloak>
                    <div class="colors-popup">
                        <img @click="openColors()" class="close-pop" src="img/close.png">
                        <img class="colors-popup-img" :src=`img/catalog/${watch.model}/group.jpg`>
                    </div>
                </div>
</div>

new Vue({
    el: root,
    data:{
        watches: apiWatch,
        isColor: false
    },
    methods:{
        openColors(){
          this.isColor = !this.isColor;
        },

Answer 1

There are a lot of popups; the property that controls their visibility is one and is of type boolean. How are you going to manage the display of 2, 3, 5, 1000, and so on, with just two values? elements? You can only show all/hide all - that's why you always see the last element.
Move the popup markup out of the loop. Instead of a boolean, store an object (the watches element you want to show) or null (if you don't want to show anything at the moment):

data() {
  return {
    show: null,
    ...

Popup opening: @click="show = watch". Closing: @click="show = null". In the popup template, change watch to show: :src="`img/catalog/${show.model}/group.jpg`".