Weird hover-bug

[InstantlyMoist]

Hi,

Sorry for being here again. I'm experiencing a bug which I'm not quite able to identify. When showing/hiding the component upon hover it sometimes get stuck inside the 'hover' state. Leading to the UI to look like this:

In this case, when 'LOL' gets hovered, it gets replaced by the SkinTile component, as shown here:

<template>
  <div @mouseenter="hover = true" @mouseleave="hover = false">
    <p v-if="!hover">LOL!</p>
    <TilesSkinTile v-if="hover" skinUrl="/skins/skin2.png?url" skinName="Nice test skin!" description="This is a test skin!"></TilesSkinTile>
  </div>
</template>

<script lang="ts" setup>
const hover = ref(false)
</script>

<style>
</style>

SkinTile:

<script setup lang="ts">

import { useEventListener, useLocalStorage } from "@vueuse/core";
import type {
  CapeLoadOptions,
  PlayerAnimation,
  SkinLoadOptions,
} from "skinview3d";
import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
import type { Background, Layers } from "vue-skinview3d";
import { SkinView3d } from "vue-skinview3d";
import {
  FlyingAnimation,
  IdleAnimation,
  RunningAnimation,
  WalkingAnimation,
} from "vue-skinview3d/animations";

defineProps({
  skinUrl: String,
  skinName: String,
  description: String
})

const availableAnimations = {
  idle: new IdleAnimation(),
  walk: new WalkingAnimation(),
  run: new RunningAnimation(),
  fly: new FlyingAnimation(),
};

const renderPaused = ref(false);
const DEFAULT_WIDTH = 200;
const DEFAULT_HEIGHT = 350;
const width = ref(DEFAULT_WIDTH);
const height = ref(DEFAULT_HEIGHT);
const fov = ref(70);
const zoom = ref(0.70);
const globalLight = ref(3);
const cameraLight = ref(0.6);
const autoRotate = ref(false);
const autoRotateSpeed = ref(2);
const animationType = ref(null as null | keyof typeof availableAnimations);
const animationSpeed = ref(1);
const animationPlaying = ref(true);
const animation = computed<PlayerAnimation | null>(() => {
  const animationClass =
    animationType.value && availableAnimations[animationType.value];
  animationClass && (animationClass.speed = animationSpeed.value);
  animationClass && (animationClass.paused = !animationPlaying.value);

  return animationClass;
});
animationType.value = "walk";
const layers = reactive<Layers>({
  inner: {
    head: true,
    body: true,
    leftArm: true,
    rightArm: true,
    leftLeg: true,
    rightLeg: true,
  },
  outer: {
    head: true,
    body: true,
    leftArm: true,
    rightArm: true,
    leftLeg: true,
    rightLeg: true,
  },
});
const skinUrl = ref("/skins/skin.png?url");
const skinOptions = reactive<SkinLoadOptions>({
  model: "auto-detect",
  ears: false,
});
const skinRef = ref<HTMLElement | null>(null);

const enableWideUI = useLocalStorage("enableWideUI", false);
const wideUIClass = computed(() => ({ "wide-ui": enableWideUI.value }));

const viewerRef = ref<InstanceType<typeof SkinView3d> | null>(null);

onMounted(adjustUI);
watch(enableWideUI, adjustUI);
useEventListener("resize", onResize);

function onResize() {
  console.log("onResize");
  if (enableWideUI.value) {
    height.value = skinRef.value!.offsetHeight;
    width.value = skinRef.value!.offsetWidth;
  }
}
async function adjustUI() {
  console.log("adjustUI");
  await nextTick();
  if (enableWideUI.value) {
    onResize();
  } else {
    height.value = DEFAULT_HEIGHT;
    width.value = DEFAULT_WIDTH;
  }
  resetRotation();
}

function resetRotation() {
  autoRotate.value = false;
    if (!viewerRef.value?.viewer) {
        return;
    }
  viewerRef.value.viewer.playerWrapper.rotation.x = 10 * (Math.PI / 180);
  viewerRef.value.viewer.playerWrapper.rotation.y = -20 * (Math.PI / 180);
  viewerRef.value.viewer.playerWrapper.rotation.z = 0;
}
</script>

<template>
  <section ref="skinRef" class="skin-tile" @mouseover="autoRotate = true" @mouseleave="resetRotation">
    <section ref="skinRef" class="section" :class="wideUIClass">
            <SkinView3d
                ref="viewerRef"
                :animation="animation"
                :auto-rotate="autoRotate"
                :auto-rotate-speed="autoRotateSpeed"
                :camera-light="cameraLight"
                :enable-pan="false"
                :enable-rotate="false"
                :enable-zoom="false"
                :fov="fov"
                :global-light="globalLight"
                :height="height"
                :layers="layers"
                :skin-options="skinOptions"
                :skin-url="skinUrl"
                :width="width"
                :zoom="zoom"
            />
        </section>
  </section>
</template>

<style lang="sass">
.skin-tile 
  background-color: rgba($primary, .70)
  border-radius: 5px
  height: 350px
  transition: 0.2s
  width: 200px

.skin-tile:hover
  background-color: rgba($primary, .85)
</style>

I'm not sure what's causing this. Would you have any clue?

[InstantlyMoist]

Another image to clarify, my mouse is at the 'rotated' skin

[InstantlyMoist]

It usually happens when hovering quickly over them, like going left to right real fast