VUE3.JS - Modale dans une boucle

Bonjour,

J'ai une requête GET dans mon composant home.vue.
Cette requête me permet d'obtenir un tableau d'objets.
Pour afficher la totalité des objets, je fait une boucle v-for et tout fonctionne bien.
 

<div class="commentaires" v-for="(com, index) of coms" :key="index">

Mon souci est que je souhaite afficher une image en cliquant dessus (coms[index].imageUrl), dans une modale (popup).
La modale s'affiche bien mais pas avec la bonne image, c'est à dire que la modale affiche la dernière image obtenue dans la boucle, ce qui n'est pas correct.

Voici le code complet de mon composant home.vue

<template>
  <div class="container">
        <div class="commentaires" v-for="(com, index) of coms" :key="index">
        <modale :imageUrl="com.imageUrl_$this.index" :revele="revele" :toggleModale="toggleModale"></modale>
        <img class="photo" :src=""" alt="image du commentaire" @click="toggleModale">
      </div>
     </div>
</template>

<script>
//import axios from "axios";
import axios from "axios";
import Modale from "./Modale";

export default {
  name: 'HoMe',
  data() {
    return {
      coms: [],
      revele: false
      }
    },
  components: {
    modale: Modale
  },
  methods: {
    toggleModale: function () {
      this.revele = !this.revele;
    },
</script>

Voici mon composant modale.vue

template>
    <div class="bloc-modale" v-if="revele">
        <div class="overlay" @click="toggleModale"></div>
        <div class="modale card">
            <div v-on:click="toggleModale" class="btn-modale btn btn-danger">X</div>     
            <img :src=""" alt="image du commentaire" id="modal">
        </div>
    </div>
</template>
<script>
export default {
    name: "Modale",
    props: ["revele", "toggleModale", "imageUrl"],
};
</script>

1 semaine que je travaille dessus mais je n'y arrive pas, alors merci beaucoup pour votre aide...
Windows / Firefox 103.0