Vue3 + Vue.Draggable.next for change element(Panel)s order UI

A code bug fix.

I am looking for a developer experienced in Vue3 and Vue.Draggable.next libray to work with me to fix a bug of my code of my project. I have done the function coding. But I found a bug, which the panel collpase status did not sync when I drag and drop the Panel component. For example, I drag opened panel "A" and drop it Above Panel B.

The expected result is:
- Panel A collapsed status keeping open.
- Both Panels positions changed accordingly.

The actual result is:
Panel A collapsedstatus changed to close. ---- No, does not meet the expected result
Panel B collapsed status chagne to open. ---- No, does not meet the expected result
Both Panels positions changed accordingly ----Yes, same as expected result

I checked Vue.Draggable.next repo example, it can accomplish this goal. But I do not have time to dig it out due to next week I am not avaiable for this fix. Below is the example.
https://sortablejs.github.io/vue.draggable.next/#/third-party

Purpose:
- Fix this bug, either continuely use Vue.Draggable.next libray or write your code, either use other Library(notify me before use it) to archive this goal.

Ideal Skills and Experience:
- Experience with Vue3 and Vue.Draggable.next
- Ability to implement draggable functionality efficiently and effectively

I will share my repo access for you if you doing this job. I also will attach code snap in attachment.