Drag and Drop Functionality in Vue.Draggable(SortableJS): Unable to drag items into non-empty groups

Question

I am working with Vue.Draggable and I am trying to create a mechanism that enables drag and drop functionality among different groups of items. My groups of items consist of several md-list-item components that are mappable and draggable.

My dilemma is that I can easily drag and drop items into empty groups. However, the same is not applicable for the non-empty groups. Here is my code and demo:

<template>
  <div>
    <md-toolbar class="md-primary">
      <h1 class="md-title">Vue Material</h1>
    </md-toolbar>

    <md-content>
      <md-list>
        <draggable :list="grouped" group="group">
          <md-list-item v-for="item in grouped" :key="item.id" md-expand>
            <md-list-item-content>
              <span>{{ item.name }}</span>
            </md-list-item-content>
            <md-list slot="md-expand">
              <draggable :list="item.children" group="item">
                <md-list-item v-for="child in item.children" :key="child.id">
                  <md-list-item-content>
                    <span>{{ child.name }}</span>
                  </md-list-item-content>
                </md-list-item>
              </draggable>
            </md-list>
          </md-list-item>

          <draggable :list="unGrouped" group="item">
            <md-list-item v-for="item in unGrouped" :key="item.id">
              <md-list-item-content>
                <span>{{ item.name }}</span>
              </md-list-item-content>
            </md-list-item>
          </draggable>
        </draggable>
      </md-list>
    </md-content>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'App',
  components: {
    draggable
  },
  data: () => ({
    grouped: [
      {id: 1, name: 'Empty group', children: []},
      {
        id: 2,
        name: 'Non-empty group',
        children: [
          {id: 5, name: 5},
          {id: 6, name: 6}
        ]
      }
    ],
    unGrouped: [
      {id: 3, name: 3},
      {id: 4, name: 4}
    ]
  })
}
</script>

<style lang="scss"></style>

Any advice or solutions would be greatly appreciated.