I have a list of women on a page. I have a component for each woman. If I click on a woman I want to show the component for that woman. If I click on another woman I want to show that component as well. So there can be any number of components loaded at one time.

It works and I see three different components for each woman but if I place a condition on the component then nothing shows and I get an error:

Property “index” was accessed during render but is not defined on instance.

But isn’t it defined in the component?

Here is my complete code for the page:

<template>
  <div class="page" id="womensPage">
    <div>
      <Contestant
        v-for="(woman, index) in women"
        :key="index"
        :contestant="woman"
        v-if="activeWindows.includes(index)"
      />
    </div>
    <div class="pageContent">
      <h1 class="center fs26 fw800 red uc mb50">Females</h1>
      <div class="contestantListWrap">
        <div class="womenList flex between">
          <div class="woman mb10" v-for="(woman, index) in women" :key="index" @click="loadWoman(index)">
            <img :src="woman.picture" class="womanImg" />
            <h3 class="flex red jCenter">{{ woman.firstName }} {{ woman.lastName }}</h3>
            <p>Age {{ woman.age }}</p>
            <p>Country: {{ woman.country }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// imports
import { ref } from "vue";
import Contestant from "@/components/Contestant.vue";

const activeWindows = ref([]);

const women = ref([
  {
    id: 1,
    picture: "/src/assets/img/one.jpg",
    firstName: "Alice",
    lastName: "Smith",
    age: 30,
    country: "USA",
  },
  {
    id: 2,
    picture: "/src/assets/img/two.jpg",
    firstName: "Maria",
    lastName: "Garcia",
    age: 25,
    country: "Spain",
  },
  {
    id: 3,
    picture: "/src/assets/img/three.jpg",
    firstName: "Yuki",
    lastName: "Tanaka",
    age: 28,
    country: "Japan",
  },
]);

// state

const loadWoman = (id) => {
  activeWindows.value.push(id);
};
</script>