Implementing div drag and drop function in Vue3

<template>
  <div class="draggable" :style="{ left: `${x}px`, top: `${y}px` }" @mousedown="startDrag">
    Drag me
  </div>
</template>

<script setup>
import { ref } from 'vue';
// Used to store responsive references to the X and Y positions of elementsconst x = ref(500);
const y = ref(500);
// Sign of whether to dragconst isDragging = ref(false);
// Function to start draggingconst startDrag = (event) => {
  // Record the initial mouse position  const initialMouseX = ;
  const initialMouseY = ;
  // Record the initial element position  const initialX = ;
  const initialY = ;
  // Start dragging, set to true   = true;
  // Function executed when the mouse moves  const dragging = (moveEvent) => {
    // Only executed when dragging    if () {
      // Calculate the distance the mouse moves      const deltaX =  - initialMouseX;
      const deltaY =  - initialMouseY;
      // Update the location of the element       = initialX + deltaX;
       = initialY + deltaY;
    }
  };
  // Function that stops dragging when the mouse is released  const stopDrag = () => {
    // End drag, set to false     = false;
    // Remove event listener    ('mousemove', dragging);
    ('mouseup', stopDrag);
  };
  // Add event listener when mouse moves and releases  ('mousemove', dragging);
  ('mouseup', stopDrag);
};
</script>

<style>
.draggable {
  width: 550px;
  height: 550px;
  border: 1px solid #000;
  position: fixed;
  cursor: grab; /* Set the mouse style to crawlable state */
  z-index: 100;
}
</style>