Как получить значения left и top (Vue)?

Question

[vitkuz573]

Имеется следующий компонент:

<template>
  <div ref="draggableContainer" id="draggable-container" @mousedown="dragMouseDown">
      <slot/>
  </div>
</template>

<script setup>
import { ref } from "vue";

const draggableContainer = ref()

const positions = ref({
    clientX: ref(undefined),
    clientY: ref(undefined),
    movementX: ref(0),
    movementY: ref(0),
})

const dragMouseDown = (event) => {
    event.preventDefault()
    positions.value.clientX = event.clientX
    positions.value.clientY = event.clientY
    document.onmousemove = elementDrag
    document.onmouseup = closeDragElement
}

const elementDrag = (event) => {
    event.preventDefault()
    positions.value.movementX = positions.value.clientX - event.clientX
    positions.value.movementY = positions.value.clientY - event.clientY
    positions.value.clientX = event.clientX
    positions.value.clientY = event.clientY
    draggableContainer.value.style.top = (draggableContainer.value.offsetTop - positions.value.movementY) + 'px'
    draggableContainer.value.style.left = (draggableContainer.value.offsetLeft - positions.value.movementX) + 'px'
}

const closeDragElement = () => {
    document.onmouseup = null
    document.onmousemove = null
}
</script>

<style>
#draggable-container {
  position: absolute;
  z-index: 10;
}
</style>

Он применяется в другом компоненте примерно так:

<DraggableDiv :style="{ left: element.attributes.coordinates.left + 'px', top: element.attributes.coordinates.top + 'px' }">
    <a :href="element.attributes.url">
        <img :src="'/storage/icons/' + element.attributes.icon" :alt="element.attributes.name" class="w-14"/>
    </a>
    <span v-text="element.attributes.name"/>
</DraggableDiv>

Нужно по событию @mouseup получить и зафиксировать новые значения left и top.

Надеюсь понятно сформулировал вопрос. Как это можно сделать?