Vue3-Draggable - Fetch Object List

I feel i must be very close to gettign this working, all I did was clone the original project from github and change the awway it creates to my own fetch request. When I set it as an array I see my items in the bottom :

<pre>{{ JSON.stringify(returnedItems, undefined, 4) }}</pre>

But they do not appear in the draggable content section. I do see in the Vue Development Tools that I have data as a normal array.

I plan on changing this to an object array tho so thatll be the next step after i get an normal array working.

<template>
  <div class="container">
    <div class="left">
      <draggable
        v-model="returnedItems"
        transition="100"
        class="drop-zone"
      >
        <template v-slot:item[0]="{ item  }">
          <div class="draggable-item">
            {{ item }}   <!-- item.title -->
          </div>
        </template>
      </draggable>

      <pre>{{ JSON.stringify(returnedItems, undefined, 4) }}</pre>
      <!-- <pre>{{ JSON.stringify(items1, undefined, 4) }}</pre> -->
    </div>

    <div class="right">
      <draggable
        v-model="items2"
        transition="100"
        class="drop-zone"
      >
        <template v-slot:item="{ item }">
          <div class="draggable-item">
            {{ item.title }}
          </div>
        </template>
      </draggable>

      <pre>{{ JSON.stringify(items2, undefined, 4) }}</pre>
    </div>
  </div>
</template>

<script>
import Draggable from "./components/DraggableContainer";
import { ref } from 'vue';
export default {
  name: "Sample",
  components: {
    Draggable
  },
  data() {
    return {
      items1: Array(5)
        .fill({})
        .map((_, index) => ({ title: `Item ${index + 1}` })),
      items2: [],
      returnedItems: ref([]),
    };
  },
  mounted() {
    fetch("http://localhost:5081/Install/GetInstall")
      .then((response) => {
        if (!response.ok){
          console.log("Error");
        }
        // console.log(response.data);
        // var sideelement = Array.from(response);
        // console.log(sideelement);
        return response.json();
      })
      .then((data) => {
        this.returnedItems = data;
        console.log(data);
        console.log("Items: " + this.returnedItems);
      })
      .catch((error) => {
        console.error("Catch Error: ", error);
      })
  }
};
</script>

Here is my answer.

<template>
    <div class="container ">
        <h1>Draggable</h1>
        <draggable v-model="list"
                   group="people"
                   @start="drag=true"
                   @end="onDragEnd"
                   item-key="id"
                   class="drop-zone scrolling">
            <template #item="{element}">
                <div class="draggable-item">{{element.fileName}}</div>
            </template>
        </draggable>
    </div>
</template>

<script>
  import { ref } from 'vue'
  import draggable from 'vuedraggable'
  

  export default {
        components: {
            draggable,
        },
        setup() {
            const list = ref([]);
            const drag = ref(false);
            const onDragEnd = (evt) => {
                console.log("Reordered: ", list.value);
            }
            return {
                drag,
                list,
                onDragEnd
            };
        },
 mounted() {
            fetch("http://localhost:5081/Install/GetInstall")
              .then((response) => {
return response.json();
})
              .then((data) => {
                this.list = data;
})
}
};
</script>