item is undefined when using group-hover (Vue 3 + TailwindCSS)

[maswebber]

Hello, i got error item is undefined, here my environtment system
Environtment:

• Linux Mint 21.1 x86_64
• Firefox 114.0.2
• Vite 4.3.9
• Vue 3.3.4
• TailwindCSS 3.3.2
• vue-slicksort 2.0.5

The code :

<SlickList axis="y" v-model:list="col.cards" class="space-y-2 overflow-y-auto overflow-x-hidden max-h-96" :group="col.column" :accept="true">
   <SlickItem v-for="(item, i) in col.cards" :key="i" :index="i" class="bg-slate-200 rounded-md px-3 py-4 flex gap-2 group hover:bg-slate-300">
        <h1 class="grow text-sm font-lights">{{ item.title }}</h1>
         <button @click="delItems(index, i)" class="group-hover:visible invisible grow-0">
            <font-awesome-icon :icon="['fas', 'pen-to-square']" size="sm" class=""></font-awesome-icon>
         </button>
   </SlickItem>
</SlickList>

item is undefined when using group-hover in button

and the cards array element that got deleted became null

when i remove the group-hover:visible invisible from button, the error gone

<SlickList axis="y" v-model:list="col.cards" class="space-y-2 overflow-y-auto overflow-x-hidden max-h-96" :group="col.column" :accept="true">
   <SlickItem v-for="(item, i) in col.cards" :key="i" :index="i" class="bg-slate-200 rounded-md px-3 py-4 flex gap-2 group hover:bg-slate-300">
        <h1 class="grow text-sm font-lights">{{ item.title }}</h1>
         <button @click="delItems(index, i)" class="grow-0">
            <font-awesome-icon :icon="['fas', 'pen-to-square']" size="sm" class=""></font-awesome-icon>
         </button>
   </SlickItem>
</SlickList>

any idea why this happened ?