Vue.Draggable不允许我在列表之间移动项目

试图跟随 this tutorial ,但在容器之间进行双向拖动。将问题减少到最小的代码集,我能够在列表中排序,但不能在列表之间排序。我从文档中得到的印象是,将两个draggable设置为相同的组名可以启用它,但事实似乎并非如此。

那么,我需要做什么才能让项目从一个列表移动到另一个列表?下面是我尝试过的代码(同样,它非常适合在同一个列表中重新排列)

<template>
<v-container fill-height fluid grid-list-md mt-0 class='about'>
    <v-layout column fill-height>
      <h1>This is an about page</h1>
      <v-layout row fill-height>
        <v-flex xs4>
          <draggable class='dragArea' v-model='peopleList'>
            <div v-for='person in peopleList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
          </draggable>
        </v-flex>
        <v-flex xs4>
          <draggable class='dragArea' v-model='employeeList'>
            <div v-for='person in employeeList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
          </draggable>
        </v-flex>
      </v-layout>
    </v-layout>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'About',
  data () {
    return {
      employees: [{ id: 6, name: 'Pete' },
        { id: 7, name: 'Pat' }],
      people: [
        { id: 1, name: 'Bob' },
        { id: 2, name: 'Mary' },
        { id: 3, name: 'Jane' },
        { id: 4, name: 'Alex' },
        { id: 5, name: 'Jim' }
      ]
    }
  },
  components: { draggable },
  computed: {
    employeeList: {
      get () {
        return this.employees
      },
      set (value) {
        this.employees = value
      }
    },
    peopleList: {
      get () {
        return this.people
      },
      set (value) {
        this.people = value
      }
    }
  }
}
</script>
<style>
div.dragArea {
  border: 1px solid black;
  min-width: 100px;
}
</style>