Vue-draggable problems

Set is not being called on computed properties when items are moved on a sub-array.

by jeffory

HTML

<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
<div id="root">
  <div v-for="(tasklist, index) in tasks" class="column">
    <draggable v-model="tasks[index]" :options="{'group': 'tasks'}">
      <div v-for="task in tasks[index]" class="item">{{task}}</div>
    </draggable>
  </div>
  
  <div class="column">
    <pre v-text="tasks"></pre>
  </div>
</div>

CSS

.column {
  border: 1px solid #eee;
  float: left;
  min-height: 300px;
  position: relative;
  width: 200px;
}
.column:not(:last-of-type) {
  margin-right: 1em;
}
.column > div {
  height: 100%;
  position: absolute;
  width: 100%;
}
.item {
  border: 1px solid #eee;
  padding: 1em 2em;
  margin: .5em;
}

JavaScript

const store = new Vuex.Store({
	state: {
  	tasks: [
    	['task 1', 'task 2', 'task 3'],
      ['task 4', 'task 5'],
    ]
  }
});

new Vue({
	el: '#root',
  store,
  computed: {
  	tasks: {
    	get() {
      	return this.$store.state.tasks
      },
    	set() {
      	console.log('This should be fired when an item is moved!')
      }
    }
  }
})