vue-dragging --使用问题

Question

<script>

export default {

data () {

return {

    colors: [{

        text: "Aquamarine"

    }, {

        text: "Hotpink"

    }, {

        text: "Gold"

    }, {

        text: "Crimson"

    }, {

        text: "Blueviolet"

    }, {

        text: "Lightblue"

    }, {

        text: "Cornflowerblue"

    }, {

        text: "Skyblue"

    }, {

        text: "Burlywood"

    }]

}

}

}

</script>

<div class="color-list">

<div 

    class="color-item" 

    v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"

    :key="color.text"

>{{color.text}}</div>

</div>

export default {

mounted () {

this.$dragging.$on('dragged', ({ value }) => {

  console.log(value.item)

  console.log(value.list)

  console.log(value.otherData)

})

this.$dragging.$on('dragend', () => {

    

})

}

}

但是如果数据结构是下面这种该如何排序？

data:[

  {

    name: '财务数据分析',

    children: [

      {

        name: '工资',

        path: '/nav/dashboard/dash1'

      }, {

        name: '报销',

        path: '/nav/dashboard/dash2'

      }

    ]

  },