I'm trying to create a custom cursor in Vue 3, but my code does not work. Here's my code

    <template>
  <div id="cursor" :style="cursorPoint"></div>
</template>

<style>
  #cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: white;
    top: 0;
    left: 0;
    z-index: 10000;
  }
</style>

<script>
  export default {
    data() {
      return {
        x: 0,
        y: 0,
      }
    },
    methods: {
      moveCursor(e) {
        this.x = e.clientX - 15;
        this.y = e.clientY - 15;
      }
    },
    computed: {
      return: `transform: translate(${this.x}px,${this.y}px)`
    },
    mounted() {
      document.addEventListener("mousemove", this.moveCursor);
    }
  }
</script>

The console gives me this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'x')

CodePudding user response：

Your computed should have the cursorPoint variable:

    ...
    computed: {
      cursorPoint() {
        return `transform: translate(${this.x}px,${this.y}px)`
      }
    },
    ...