Estoy recorriendo una matriz que muestra canciones que he subido a firebase. Le doy al usuario un botón para editar el nombre de la canción si presiona el botón editar. Sin embargo, cuando se presiona el botón, se muestra para editar detalles, excepto solo el objeto que se expande, todos se expanden para editar. ¿Cómo puedo darle a cada objeto su propia versión de showForm Bool? Gracias.

Visualización de canciones:

 <div v-for="song in watchSongs" :key="song.docID"> <div class="mt-[10px] border-solid border-2 border-gray-400 rounded-lg p-[5px] min-h-[40px]"> <p class="font-bold float-left">{{song.modifiedName}}</p> <img @click.prevent="showForm = !showForm" src="@/assets/edit.png" alt="" class="w-[20px] float-right hover:cursor-pointer"> <img src="@/assets/close2.png" alt="" class="w-[20px] float-right hover:cursor-pointer"> <div v-if="this.showForm" class="pt-[30px]"> <p>song title</p> <input type="text" placeholder="Enter Song Title" class="w-[100%] h-[30px] pl-[5px] mt-[10px] bg-transparent border-[1px] border-solid border-gray-300"> <p>Genre</p> <input type="text" placeholder="Enter genre" class="w-[100%] h-[30px] pl-[5px] mt-[10px] bg-transparent border-[1px] border-solid border-gray-300"> <div class="flex mt-[20px] mb-[10px]"> <button class="bg-green-500 rounded-md w-[70px] mr-[5px]">Submit</button> <button class="bg-gray-400 rounded-md w-[70px]">Go back</button> </div> </div> </div>

Los datos:

 export default { name:"AppUploadDetails", props: ['songs'], data(){ return{ showForm:false, } }, computed:{ watchSongs(){ return this.songs; } }

}