Как перетаскивать компоненты, но не менять значение внутри

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>

Может кто-нибудь знает, что не так или как решить эту проблему? много танков за любую идею ...