Nested item becomes non-proxied after moving between nested lists

[notifybee]

Hi,

After dragging an item from one nested list to another, is it correct that the item becomes a non-proxied object?

In this instance I moved card.1 from another board, and it changes to a non-proxied object.

The code for the nested boards is

                 <VueDraggable
                        @end="onEndBoard"
                         v-model=boardList class="flex flex-row min-h-64">
                            <div v-for="board in boardList" :key="board" class="w-80 rounded-md m-4 p-4 text-left bg-slate-100">
                                {{ board.name }}

                                <VueDraggable
                                @end="onEndCard"
                                v-model=board.card group="g1" class="min-h-full" :id="board.id">
                                    <div v-for="itemCard in board.card" :id="itemCard.id" :key="itemCard" class="w-80 bg-white rounded-md m-4 p-4 text-left bg-slate-100">
                                        {{ itemCard }}
                                    </div>
                                </VueDraggable>
                            </div>
                        </VueDraggable>

I ask because of this bug in inertiajs inertiajs/inertia#775 and wondered if the non-proxied object was breaking it.

[Alfred-Skyblue]

Due to the internal use of JSON for deep copying, it will cause the loss of Proxy.

vue-draggable-plus/src/useDraggable.ts

Lines 30 to 33 in ef2cc8f

	function defaultClone<T>(element: T): T {
	if (element === undefined || element === null) return element
	return JSON.parse(JSON.stringify(element))
	}

You can pass a clone function that returns the proxy object:

<script setup>
import { reactive } from 'vue'

function clone(el) {
 const val = JSON.parse(JSON.stringify(el))
 return reactive(val)
}
</script>

<template>
 <VueDraggable :clone="clone">
   <!-- code   -->
 </VueDraggable>
</template>