我试图在Vue 3中使用Nuxt和VueUse创建一个可组合的组件，它可以让任何组件跟随鼠标光标。我有以下可组合的组件：

export function useStickToMouse(target) {
  onMounted(() => {
    const {elementX, elementY} = useMouseInElement(target);
    function moveTarget(event:MouseEvent) {
      target.value.style.left = `${elementX.value}px`;
      target.value.style.top = `${elementY.value}px`;
    }
    useEventListener(window, 'mousemove', moveTarget)
  });
}

字符串
下面是follow-mouse-wrapper组件：

<template>
  <div ref="target">
    <slot></slot>
  </div>
</template>

<script setup>

const target = ref(null);
useStickToMouse(target)
  
</script>

型
所以我可以用这样的东西：

<follow-mouse-wrapper>
  <component-to-move></component-to-move>
</follow-mouse-wrapper>

型
改变style属性不会移动元素，但是使用anime.js会，但是它会做一些奇怪的事情：

//Composable using anime.js
export function useStickToMouse(target) {

  onMounted(() => {
    const {elementX, elementY} = useMouseInElement(target);

    function moveTarget(event:MouseEvent) {
      useAnime({
        targets: target.value,
        translateX: elementX.value,
        translateY: elementY.value
      })
        
    }
    
    useEventListener(window, 'mousemove', moveTarget)
  });

}

型
让元素跟随光标的最佳方法是什么？