嵌套的 vuedraggable - 可拖动的子项不显示

问：

我想通过拖动来达到管理页面上的子页面（更改顺序、级别）的效果。

为此，我使用vuedragabble。

我在更改深度级别时遇到了问题 - 我想我需要这个解决方案。

我在 vue 2 中的代码：

<template>
  <div id="app">
    <draggable v-bind="dragOptions" v-model="pagesList" class="item-container">
      <div v-for="page in pagesList" :key="page.id" class="item-group">
        <div class="item">
          {{ page.title }}
        </div>
        <draggable class="item-sub" />
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "App",
  components: {
    draggable,
  },
  data: () => ({
    pagesList: [
      {
        id: 1,
        title: "Home",
        level: 1,
        order: 1,
      },
      {
        id: 2,
        title: "Offer",
        level: 1,
        order: 2,
      },
      {
        id: 3,
        title: "Offer 1",
        level: 2,
        order: 3,
      },
      {
        id: 4,
        title: "Offer 2",
        level: 2,
        order: 4,
      },
      {
        id: 5,
        title: "Contact",
        level: 1,
        order: 5,
      },
    ],
  }),
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    },
  },
};
</script>

https://codesandbox.io/s/stoic-bas-tpn5sd?file=/src/App.vue

我应该怎么做才能获得这样的效果，并能够自由移动元素并嵌套它们？

也许我应该更改我从 api 获得的 pageLists 结构？

但是，即使我更改了结构，数据也看起来像这样：

pagesList: [
      {
        id: 1,
        title: "Home",
        level: 1,
        order: 1,
        subpages: [],
      },
      {
        id: 2,
        title: "Offer",
        level: 1,
        order: 2,
        subpages: [
          {
            id: 3,
            title: "Offer 1",
            level: 2,
            order: 3,
          },
          {
            id: 4,
            title: "Offer 2",
            level: 2,
            order: 4,
          },
        ],
      },
      {
        id: 5,
        title: "Contact",
        level: 1,
        order: 5,
        subpages: [],
      },
    ],

我还将更改代码：

<draggable :list="page.subpages" class="item-sub" />

它不起作用 - 子页面不显示