问如何在Nuxt 3上使用UseScroll

EN

<script setup lang="ts">
const { x:mouseX, y:mouseY } = useMouse()

const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
</script>

<template>

<div>Mouse pos: {{mouseX}}, {{mouseY}}</div>
<div ref="el"></div>


      <NuxtWelcome /> //inserted to make the page long  so we can scroll
      <div>Scroll po pos: {{x}}, {{y}}</div> // here is the problem both x and y are 0,0 no matter how you scroll

  <NuxtWelcome /> //inserted to make the page long so we can scroll

</template>