How to get the new list as an array?

I have trouble getting the new array list.
here is my code

<template>
  <div>
    <Sortable :list="elements" item-key="id" tag="div" :options="options" @change="DragableData($event)">
      <template #item="{ element, index }">
        <div :key="element.id">
          {{ index }} - {{ element.name }}
        </div>
      </template>
    </Sortable>
  </div>
</template>

<script setup>
const elements = [
  { id: "1", name: "one" },
  { id: "2", name: "two" },
  { id: "3", name: "three" },
  { id: "4", name: "four" },
];
const options = {sort: true};

function DragableData(data) {
  console.log(data)
}
</script>

data here does not have any array in it. is it possible to get new array?

Start at the component's @change handler and inspect the event logged by DragableData(data), comparing it with the elements list. Check the library's change-event behavior and determine whether a reordered array is exposed; done means the expected new list can be obtained after dragging.