How to implement logic reuse with Vue3 composition API

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

// 1. Define a function, extract logic, and name it useXXX
function useMousePosition() {
  // Use ref to define const x = ref(0)
  const y = ref(0)

  function update(e) {
    console.log(x.value, y.value);

    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    console.log('Start listening for mouse movement events');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log('Remove mouse scroll event monitoring');
    window.removeEventListener('mousemove', update)
  })
  return {
    x, 
    y
  }
}

 
// Export this function export default useMousePosition

<!-- This method can be called in any component-->

<template>
  <p>mouse position: {{x}}, {{y}}</p>
</template>

<script>
import useMousePosition from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // useMousePosition uses ref to define variables, which can be deconstructed const { x, y } = useMousePosition()
    console.log(x, y)
    return {
      x, y
    }
  }
}
</script>

import { onMounted, onUnmounted, reactive } from 'vue'

export function useMousePosition2() {
  // Use reactive to define const mouse = reactive({
    x: 0, 
    y: 0
  })

  function update(e) {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }

  onMounted(() => {
    console.log('Start listening for mouse movement events');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log('Remove mouse scroll event monitoring');
    window.removeEventListener('mousemove', update)
  })

  return {
    mouse
  }
}
<template>
  <!-- Use object method to display information -->
  <p>mouse position2: {{mouse.x}}, {{mouse.y}}</p>
</template>
<script>
import { useMousePosition2 } from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // useMousePosition2 is defined using reactive, so deconstruction is not possible const { mouse } = useMousePosition2()
    return {
      mouse
    }
  }
}
</script>

export function useMousePosition3() {
  // Use reactive to define const mouse = reactive({
    x: 0, 
    y: 0
  })

  function update(e) {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }

  onMounted(() => {
    console.log('Start listening for mouse movement events');
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    console.log('Remove mouse scroll event monitoring');
    window.removeEventListener('mousemove', update)
  })
  
  // Here, use toRefs to deconstruct into ref object return toRefs(mouse)
}
<template>
  <p>mouse position: {{x}}, {{y}}</p>
</template>

<script>
import { useMousePosition3 } from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // Use reactive to define the mouse coordinate object, and then deconstruct it into a ref object through toRefs const { x, y } = useMousePosition()
    console.log(x, y)
    return {
      x, y
    }
  }
}
</script>