title: Vue Draggable child components modifying parent data
body: <p>My apps structure looks something like this</p>
  <pre><code>App
      Column Component
          Task Component
          Task Component
          Task Component
      Column Component
          Task Component
          Task Component
      Column Component
      Column Component
  </code></pre>
  <p><a href="https://i.stack.imgur.com/gHBly.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gHBly.png" alt="enter image description here" /></a></p>
  <p>Each column has a <code>&lt;draggable&gt;</code> component surrounding the tasks.
  At the App level, I have a data object with the different colums and each column with its tasks.</p>
  <pre><code>data: function() {
      return {
          columns: {
              new: [
                  {
                      ID: 1,
                      title: 'The thing',
                      description: 'Prepare a proposal for facade'
                  },
                  {
                      ID: 2,
                      title: 'The thing 2',
                      description: 'Prepare a proposal for facade'
                  },
                  {
                      ID: 3,
                      title: 'The thing 3',
                      description: 'Prepare a proposal for facade'
                  }
              ],
              inProgress: [
                  {
                      ID: 4,
                      title: 'The thing 4',
                      description: 'Prepare a proposal for facade Store Opening Process (DEMO)'
                  },
                  {
                      ID: 5,
                      title: 'The thing 5',
                      description: 'Prepare a proposal for facade Store Opening Process (DEMO)'
                  }
              ],
              done: [],
              onHold: []
          }
      }
  }
  </code></pre>
  <p>I loop over the columns, and bind the object to the component:</p>
  <pre><code>&lt;kool-column
      v-for=&quot;column&quot;
      v-bind=&quot;colum&quot;
  &gt;&lt;/kool-column&gt;
  </code></pre>
  <p>The Kool Column component:</p>
  <pre><code>&lt;script id=&quot;kool-column-template&quot; type=&quot;text/x-template&quot;&gt;
      &lt;div&gt;
          &lt;div&gt;
              {{ column.name }} ({{ column.cards.length }})
          &lt;/div&gt;
          &lt;div&gt;
              &lt;draggable v-model=&quot;cards&quot; group=&quot;columnkool&quot;&gt;
                  &lt;div v-for=&quot;card in cards&quot; :key=&quot;card.ID&quot;&gt;
                      &lt;kool-card v-bind=&quot;card&quot;&gt;&lt;/kool-card&gt;
                  &lt;/div&gt;
              &lt;/draggable&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
          Vue.component('koolColumn', {
              template: '#kool-column-template',
              props: {
                  ID: {
                      type: Number,
                      required: true
                  },
                  name: {
                      type: String,
                      required: true
                  },
                  cards: {
                      type: Array,
                      default: function() { return []; }
                  }
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  <p>So, my problem, when I drag and drop the cards, I get a Vue error/warning:</p>
  <pre><code>[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: &quot;cards&quot;
  </code></pre>
  <p>Makes sense, I have been reading and investigating and in Vue, you want to use props to pass data down into the components, but then, to modify this data, you send an event to the parent, and let the parent modify it.</p>
  <p>Ok, but the library I am using <a href="https://github.com/SortableJS/Vue.Draggable" rel="nofollow noreferrer">Vue Draggable</a> modifies the list I pass it. So, what should I do?
  Solutions that I thougt about:</p>
  <ol>
  <li>On mounting the column component, copy the prop cards into a data of the component, use this for the list and modifications, and everytime it is changed, send to the parent the new list. I don't think this makes much sense, I will have two sources of information (the cards in the app object and the cards in my column component object), and risk that they are not aligned, after all, I am updating the list separately.</li>
  <li>When droping an item, use the library to actually &quot;not allow&quot; the drop, (you can use the library events and return false so it does not actually change the lists). Catch the event, send to the parent the info of what item was dragged and were the user tried to drop it and change the data accordingly. Basically, I would be using the drag and drop library just to know where the user tried to drop something, and actually changing the data manually. This also seems strange, the code is really   hard to follow and there is a flicker when droping an item (because it goes back to its original position and then to where you wanted to have it).</li>
  <li>Another bad solution is to pass to the column component, not a v-bind and each property individually, but the whole object. So instead of <code>v-bind=&quot;colum&quot;</code> I do <code>:column=&quot;column&quot;</code> which actually makes the Vue Warning disappear and keeps the double data binding. The thing is, I am doing the anti-pattern, without the warning, but still... (btw, this approach comes from this example: <a href="https://levelup.gitconnected.com/task-management-application-using-vue-js-part-1-df607ca30f48" rel="nofollow noreferrer">Task management using Vue</a>)</li>
  </ol>
  <p>Should I go on with the approach #2?, ugly but at least not an anti-pattern and not doubling the info. Or is there another way of keeping the double data binding when I am not in &quot;control&quot; of the list being updated? Or maybe just a different architecture/structure for the app?.</p>