List doesn't get updated in nested draggable

[smebrahimi]

I'm trying to use nested draggable, visually is works but my list didn't update after I drag & drop an item Actually, the object does not change

Code:

  <draggable
    :list="list"
    class="sc-nested-draggable"
    tag="ul"
    item-key="name"
    :group="{ name: 'g1' }"
    :handle="!!handleIcon && '.handle'"
    chosen-class="sc-nested-draggable__chosen"
    :swap-threshold="0.5"
    filter=".cursor-pointer"
  >
    <template #item="{ element }">
      <li class="sc-nested-draggable__child">
        {{ element.name }}
        <sc-nested-draggable
          :items="element.categories"
          :handle-icon="handleIcon"
        />
      </li>
    </template>
  </draggable>

Object:

  items: [
    {
      id: 1,
      name: "Women",
      categories: [
        {
          id: 2,
          name: "Dress",
          categories: [
            {
              id: 21,
              name: "Summer Dress"
            },
          ],
        },
      ],
    }
  ]

I expect the object to be updated after each change

[smebrahimi]

I solved it, the demo is incorrect

From

  <draggable
    class="dragArea"
    tag="ul"
    :list="tasks"
    :group="{ name: 'g1' }"
    item-key="name"
  >
    <template #item="{ element }">
      <li>
        <p>{{ element.name }}</p>
        <nested-draggable :tasks="element.tasks" />
      </li>
    </template>
  </draggable>

To

  <draggable
    class="dragArea"
    tag="ul"
    :list="tasks"
    :group="{ name: 'g1' }"
    item-key="name"
  >
    <template #item="{ element }">
      <li>
        <p>{{ element.name }}</p>
        <nested-draggable :list="element.tasks"  :tasks="element.tasks"/>
      </li>
    </template>
  </draggable>