Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the component being hovered over, without affecting the other components. However, in my current implementation below, when I hover over one component, all components are affected. So, my question is how can I achieve the desired result?
<component v-for="(item, index) in items" :key="index">
<div @mouseover="hover = true" @mouseleave="hover = false">
<div v-if="hover" class="xx"> Hover Effect </div>
<div v-else> Normal Effect </div>
</div>
</component>