1. <template>
    2.     <div>
    3.       {{x}},{{y}}
    4.     </div>
    5. </template>
    7. <script setup>
    8. import { reactive, toRefs } from "@vue/reactivity";
    9. import { onMounted, onUnmounted } from "@vue/runtime-core";
    11. const state = reactive({
    12.   x:0,
    13.   y:0,
    14.   updateMouse(e){
    15.     state.x = e.offsetX
    16.     state.y = e.offsetY
    17.   }
    18. })
    19. const {x,y} = toRefs(state);
    20. onMounted(()=>{
    21.   document.addEventListener("click",state.updateMouse)
    22. })
    23. onUnmounted(()=>{
    24.   document.removeEventListener("click",state.updateMouse)
    25. })
    26. </script>