Estoy tratando de ocultar y mostrar el nombre del usuario cuando coloco el cursor sobre la imagen del usuario, todos los usuarios se representan dentro de un bucle for y creé un método de ocultar/mostrar para mostrar el nombre al lado de la imagen. pero el error es que todos los nombres se ocultan/muestran si estoy sobre cualquier imagen en el bucle for. por favor ayuda . este es mi código a continuación.

 <ul class="space-y-2"> <li v-for="(item,index) in activeUserRooms" :key="index" class="flex space-x-3"> <div class="shadow-md rounded-md h-10" v-if="showName"> <p class="my-2 mx-1">{{item.name}}</p> </div> <img :src="item.image" class="rounded-full h-12" @mouseover="showUsername(index)" @mouseleave="hideUsername(index)"> </li> </ul> data() { return { floatbtnclicked: false, activeUserRooms:[ {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",}, {name:"Lisa Wanka",image:"https://randomuser.me/api/portraits/women/85.jpg",} ], showName:false }; }, methods:{ showUsername(index){ this.showName = true; }, hideUsername(index){ this.showName = false; } }

gracias de antemano .