i am looping through an array displaying songs I have uploaded into firebase. I am giving the user a button to edit the name of the song if they press the edit button. When button is pressed it show to edit details, however, except of only the one object expanding all of them expand to edit. How can I give each object its own version of the showForm Bool thanks.

Displaying songs:

<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>

The data:

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

}