vue3 鼠标点击，跟着显示坐标_vue中canvas画板对应坐标出现小圆点

<template>
<div>
  <p>
    {x}--{y}
    {
  {x}}---{
  {y}}
  </p>
</div>
  
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
// import HelloWorld from './components/HelloWorld.vue';
 
import {ref, onMounted,onUnmounted} from "vue";
 
export default defineComponent({
  name: 'App',
  setup(){
    const x = ref(0);
    const y = ref(0);
    const dc = (e: MouseEvent)=>{
         console.log(e.pageX);
        console.log(e.pageY)
        x.value = e.pageX;
        y.value = e.pageY;
    }
  
    onMounted(()=>{
      document.addEventListener("click",dc);}
    )
   onMounted(()=>{
      document.addEventListener("click",dc);
   })
    return {
      x,y
    }
  }
});
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: ant