Why it's don't works?

[AntonioAndreDev]

System info

Vue 3 Composition API

Reproduction

When I mouse over the button the :hovered dont't make effects when isHorvered is equals true.

Describe the bug

{{ isHovered }} <script setup lang="ts"> import {Icon} from '@iconify/vue'; import {ref} from "vue"; const isHovered = ref(false); </script>

Additional context

No response

Logs

No response

[AntonioAndreDev]

The code:

<template>
  <button
    class="relative flex items-center gap-2 overflow-hidden border-[1px] border-violet-300 px-4 py-2 font-semibold uppercase text-violet-300 transition-all duration-500
           before:absolute before:inset-0 before:-z-10 before:translate-x-[150%] before:translate-y-[150%] before:scale-[2.5] before:rounded-[100%] before:bg-violet-300 before:transition-transform before:duration-1000 before:content-['']
           hover:scale-105 hover:text-neutral-900 hover:before:translate-x-[0%] hover:before:translate-y-[0%] active:scale-95 rounded-full"
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
  >
    <Icon
      v-motion
      :initial="{
        translateX: 0,
        transition: {
          duration: 0.5, // Duração da animação ao iniciar
        },
      }"
      :hovered="isHovered ? {
        translateX: -2,
        transition: {
          duration: 0.5, // Duração da animação ao finalizar
        },
      } : {}"
      :scale="isHovered ? 1.1 : 1"
      icon="mdi-light:arrow-left"
      class="transition-transform"
    />
  </button>
  {{ isHovered }}
</template>

<script setup lang="ts">
import {Icon} from '@iconify/vue';
import {ref} from "vue";

const isHovered = ref(false);

</script>