title: VueJS: use computed "set/get" with Vue.Draggable and VueX
body: <p>I'm seeking for a help with "Vue.Draggable".
  The second day I`m trying to update draggable array correctly.</p>
  
  <p>The challenge is:</p>
  
  <ul>
  <li>update draggable array using computed set/get functions</li>
  <li>get draggable item properties including information about parent item and call axios function to update data on a MySQL.</li>
  </ul>
  
  <p>Data sample:</p>
  
  <pre><code>{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] } }
  </code></pre>
  
  <p>Rendering code:</p>
  
  <pre><code>&lt;div v-for="(category, index) in categories"&gt;
      &lt;draggable v-bind:id="index" v-model="category.authors" :options="{group:'authorslist', draggable:'.author'}" class="draggable-row" &gt;
      &lt;div v-for="author in category.authors" :key="author.id" class="author" &gt;
  </code></pre>
  
  <p>What I'm trying to do:</p>
  
  <p>Actually, mentioned construction works fine. But only visually.
  VueX gives an error about mutation process. </p>
  
  <pre><code>[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers." Error: [vuex] Do not mutate vuex store state outside mutation handlers.
  </code></pre>
  
  <p>Replacing <code>v-model</code> with <code>:value</code> helps but in this case, D&amp;D is not working even visually.</p>
  
  <p>I have tried a lot of variants... One  is - create a computed property for "categories" and use "get/set" functions to call <code>actions-&gt;mutations</code> from them. The problem is - <code>categories-&gt;set</code> function is not working when we are changing <code>authors</code> array structure.</p>
  
  <p>The second problem is drag and drop <code>author</code> between <code>categories</code> in such a way it allows us to get author and category id to use it in an <code>Axios</code> query.</p>
  
  <p>I was trying to use <code>@end</code> event BUT(!) it works for only a sorting process but not for D&amp;D between parent elements (categories).</p>
  
  <p><strong>I'll be very grateful for any help!</strong></p>