title: How do I use Vue-draggable and Vuex to dynamically split up one list into multiple lists?
body: <p>I have an array that takes input from the user from answering multiple questions.  These values are stored in my vuex store and the results are displayed on screen in a draggable list.</p>
  
  <pre><code>computed: {
    allValues() {
          const val1 = this.responses1
          const val2 = this.responses2
          const val3 = this.responses3
          const val4 = this.responses4
          const val5 = this.responses5
          const val6 = this.responses6
          const val7 = this.responses7
          const coreValues = val1.concat(val2,val3,val4,val5,val6,val7)
          this.$store.dispatch('corevalues/loadCoreValues', coreValues)
          return this.$store.getters['corevalues/getCoreValues']
      }
    }
  </code></pre>
  
  <p><strong>Draggable List</strong></p>
  
  <pre><code> &lt;draggable :v-model="allValues" 
      options:='group: "allValues"'&gt;
       &lt;transition-group&gt;
        &lt;div v-for="val in allValues" :key="val.value"&gt;
            {{val.value}}
        &lt;/div&gt;
      &lt;/transition-group&gt;
   &lt;/draggable&gt;
  
  {{ allValues }}
  </code></pre>
  
  <p>However, on screen although I can drag and sort the values - they do not reorder in the Vuex Store, only on-screen. </p>
  
  <p><strong>1) I need them to re-order in the store.</strong></p>
  
  <p><strong>2) Although a single array is created through the user input I require users to be able to drag values into a second or even a third column in order to group them.</strong></p>
  
  <p>How do I make it so my on screen changes are reflected in the store - even in a new array - and so that my list can be split up into multiple columns?</p>
  
  <p>This my my Code Sandbox: <a href="https://codesandbox.io/embed/vue-template-j53g3" rel="nofollow noreferrer">https://codesandbox.io/embed/vue-template-j53g3</a></p>
  
  <p><strong>EDIT</strong>: After Sabee response</p>
  
  <p>I have implemented the following code:</p>
  
  <pre><code>watch:{
      allValues: {
          handler: function(newValue) {
            console.log('here', newValue)
            this.$store.dispatch("corevalues/loadCoreValues", newValue);
          }
      },
      deep: true // deep watching changes
    },
  </code></pre>
  
  <p>But as the image below shows - the arary <code>{{ allValues }}</code> is still in the same order even though it has been re-arranged on screen.</p>
  
  <p><a href="https://i.stack.imgur.com/yUWZn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yUWZn.png" alt="enter image description here"></a></p>
  
  <p><strong>2nd edit</strong></p>
  
  <p>Updated code as advised.</p>
  
  <p>Console is logging 'Drag Ended' but as the screenshot below shows the Core Values in the store has not updated - this is after 'reloading state' via dev tools.</p>
  
  <p><a href="https://i.stack.imgur.com/72bIx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/72bIx.png" alt="enter image description here"></a></p>