如何拖动组件而不更改内部值

Question

我在vue js和可拖动库中有一个简单的拖放应用程序，请参阅：http://www.batuanec.com/tree/#/drag

当单击项目时，它会打开或关闭。当在另一个项目之前或之后拖动项目时，可拖动的工作正常，但对于索引1上的示例项目仍保持打开状态。有人知道这是什么问题或如何解决此问题？

我有两个vue文件 TestDrag.vue和Dragitem.vue，代码如下

// TestDrag.vue
<template>
    <draggable v-model="list" :options="{group:'items'}" element="div" class="cell large-2">
        <DragItem v-for="(item, index) in list"
            :name="item.name"
            :open="item.open"
            :key="index">
        </DragItem>
    </draggable>
</template>

<script>
import DragItem from '@/components/DragItem'
import draggable from 'vuedraggable'

export default {
  name: 'TestDrag',
  components: { DragItem, draggable },
  data () {
    return {
      list: [
        { name: 'Item 1', open: false },
        { name: 'Item 2', open: true },
        { name: 'Item 3', open: false }
      ]
    }
  }
}
</script>

//DragItem.vue

<template>

    <div class="grid-x grid-padding-x main">
        <div class="cell text-center name" @click="toogle">
            {{ name }}
        </div>
        <div class="cell text-center open" v-if="isOpen">
            {{ isOpen }}
        </div>
    </div>

</template>

<script>
export default {
  name: 'DragItem',
  props: {
    name: {
      type: String,
      default: ''
    },
    open: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      isOpen: this.open
    }
  },
  methods: {
    toogle: function () {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

谁能知道哪里出了问题或如何解决此问题？任何想法的许多Tahnks ...