Issue with clone example

[yogeshwar1996]

First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md

Jsfiddle link

https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/clone.vue

Step by step scenario

file:///home/developer/Videos/Kazam_screencast_00002.mp4

Actual Solution

Expected Solution

[mladen]

Hi there @yogeshwar1996 ,

I recently noticed the same issue. In the Vue devtools, I observed that list2 was being updated, but the view wasn't reflecting the changes. In my current project, where I'm using the Composition API, I resolved this by making the arrays (lists of users) reactive. Essentially, I did the following:

import { ref } from "vue";
import Draggable from "vuedraggable";

const list1 = ref([
  { name: "John", id: 1 },
  { name: "Joao", id: 2 },
  { name: "Jean", id: 3 },
  { name: "Gerard", id: 4 },
]);

const list2 = ref([
  { name: "Juan", id: 5 },
  { name: "Edgard", id: 6 },
  { name: "Johnson", id: 7 },
]);

Hopefully this will be useful to you or someone else.

Kind regards,

Mladen

p.s. You did not attach your video properly.

Edit: Using the correct term for "lists" (of users).