To explain my problem, I would like in my application that when the user clicks on my parent component, it opens an off canvas menu with the details of the parent component. For this, I pass an object by generating my child component in a v-for but when I click on the parent, I only get the first object of my array. How can I get the right object for the parent I click on?

Parent component:

<div v-if="missions">
    <div v-for="mission in missions" :key="mission._id">
      <div id="mission-box" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-mission"
           aria-controls="offcanvas-mission">
        <div id="mission-title">
          <span style="margin-left: 10px"><strong>{{ mission.libelle }}</strong></span>
        </div>
      </div>
      <MissionMenuModal :mission="mission"/>
    </div>
  </div>

Child component:

<template>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-mission" aria-labelledby="offcanvas-mission">
    <div class="offcanvas-header">
      <div class="d-inline-flex">
        <h5 class="m-auto"><b>{{ mission.libelle.toUpperCase() }}</b></h5>
      </div>
      <div class="float-end">
        <font-awesome-icon icon="ellipsis-h"/>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
    </div>
    <div>
      <p><strong>Dates / Délai</strong>
        {{ convertJsDate(mission.dateDebut) + " - " +
        convertJsDate(mission.dateFin) + " / " + mission.delai + " jours" }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "MissionMenuModalV2",
  props: {
    mission: {
      type: Object,
      default: () => ({}),
    }
  },
  methods: {
    convertJsDate(dateFormat) {
      if (dateFormat !== undefined) {
        let date = new Date(dateFormat),
            month = '' + (date.getMonth() + 1),
            day = '' + date.getDate(),
            year = date.getFullYear();

        if (month.length < 2)
          month = '0' + month;
        if (day.length < 2)
          day = '0' + day;
        return [day, month, year].join('.');
      }
    },
  },
}
</script>