Hola, quiero hacer una función que muestre una explicación para solo un div todo el tiempo, pero me muestra cualquier div, ¿pueden ayudarme, por favor? Usando VueJs

esta es mi funcion

 showInfo() { const explanDiv = document.querySelectorAll('.explan-div') explanDiv.forEach(div => { div.classList.toggle('opacity-scale') console.log('Hello') }) },

y el código HTML

 <div v-if="!isPlayerVisible"> <div class="grid grid-cols-1 auto-rows-[minmax(0,_150px)] w-11/12 mx-auto rounded-lg justify-center items-center"> <div class="hover-div relative text-white cursor-pointer mx-auto" v-for="(season, index) in seasons" v-bind:key="season.id"> <div v-on:click="playSong(index)" :style="{ backgroundImage: `url('/uploads/thumbnail/${season.thumbnail}')`, width: '150px', height: '100px', backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: '10px', zIndex: '1', }"> </div> <div class="info-icon" v-on:click="showInfo"> <InfoIcon></InfoIcon> </div> <div class="explan-div opacity-scale"> <p class="text-center pt-2 text-[10px]">{{season.name}}</p> <div class="p-2"> <p>Beschreibung:</p> <p>{{season.description}}</p> </div> </div> </div> </div>

Ya lo probé con un enlace de identificación, pero se destruyó por completo y nada funcionó. ¿Conoces algunas formas eficientes de hacerlo? Gracias por cualquier tipo de ayuda