Vue 可拖动删除我的嵌套对象数据？

如何解决Vue 可拖动删除我的嵌套对象数据？

我在我的 Nuxt Js 项目中使用 Vue Draggable 并循环遍历一系列从 API 获取并克隆到我的页面的组件。其中之一包含我的图表数据选项，当我对我的数据进行 console.log 处理时，我可以非常清楚地看到这些选项，并且它具有适当的对象。

但是，当我将其输出到我的页面时，Vue Draggable 似乎正在剥离我的嵌套对象，为什么？

这是我的 component.datasets[0].chartOptions 在输出到页面之前的样子：

当我在获取报告的函数中控制台日志 this.report 时，我可以清楚地看到我的图表选项：

以下是 Vue Draggable 为我的 component.datasets[0].chartOptions 提供的内容，我在 v-for 中输出：

{
  "legend": {},"scales": {},"elements": {},"responsive": true,"maintainAspectRatio": false
}

作为参考，这是我的v-for：

<draggable
  class="dragArea h-auto pb-96"
  :list="report"
  group="components"
>
  <div
    v-for="(component,index) in report"
    :key="index"
  >
    <div v-if="component.type == 'chart'">
      <div class="chart chart--generic" v-if="component.datasets && component.datasets[0]">
        <pre>
          {{ component.datasets[0].chartOptions }}
        </pre>
        <LineChart
          :options="component.datasets[0].chartOptions"
          :labels="component.datasets[0].labels"
          :datasets="component.datasets"
        />
      </div>
    </div>
  </div>
</draggable>

我错过了什么？