title: Vue.Draggable Not Moving Component
body: <p>So I am struggling with a mini page builder I am working on. I have the following code I am working on:</p>
  
  <p>JavaScript/Vue Code: <a href="http://git.dannysmc.com/snippets/63" rel="nofollow noreferrer">http://git.dannysmc.com/snippets/63</a> - Also pasted below:</p>
  
  <pre><code>// Import Vue Data
  import Vue from 'vue';
  import $ from 'jquery';
  import draggable from 'vuedraggable'
  
  // Import page builder registry
  import Registry from '../pagebuilder/registry.json';
  
  // Import page builder components
  import ComTextBlock from '../pagebuilder/com-text-block.vue';
  
  // Setup new Vuex store
  window.vm.content_pages_create = new Vue({
      el: '#content-pages-create',
      name: 'PageBuilder - Create',
      store: window.vm.store,
      components: {
          draggable,
          ComTextBlock,
      },
      data: {
  
          // Define pagebuilder registry
          registry: Registry,
  
          // Define the page content
          page: {
              elements: 0,
              rows: [],
          },
      },
      methods: {
  
          // Add new page row
          addPageRow: function(index) {
              var under_index = (typeof index === 'undefined' ? false : parseInt(index));
              var element_id = this.page.elements++;
              this.page.rows.push({
                  id: element_id,
                  text: 'Hello #' + element_id,
                  columns: [
                      {id: this.page.elements++, width: 6, components: []},
                      {id: this.page.elements++, width: 6, components: [
                          {
                              id: this.page.elements++,
                              data: {},
                              name: 'Text Block',
                          },
                          {
                              id: this.page.elements++,
                              data: {},
                              name: 'Text Block',
                          },
                      ]},
                  ],
              });
          },
  
          // Remove page row
          removeRow: function(index) {
              if (window.confirm('Are you sure you want to remove this row and it\'s contents?')) {
                  this.page.rows.splice(index, 1);
              }
          },
  
          // Clone component
          cloneComponent: function(row_index, col_index, com_index) {
              var component = JSON.parse(JSON.stringify(this.page.rows[row_index].columns[col_index].components[com_index]));
              this.page.rows[row_index].columns[col_index].components.push(component);
          },
  
          // Remove component
          removeComponent: function(row_index, col_index, com_index) {
              if (window.confirm('Are you sure you want to remove this component?')) {
                  this.page.rows[row_index].columns[col_index].components.splice(com_index, 1);
              }
          },
  
          // Resolve a component name
          resolveComponentName: function(component) {
              var cname = component.name.split(' ');
              for (var i = 0; i &lt; cname.length; i++) {
                  cname[i] = cname[i].toLowerCase().charAt(0).toUpperCase() + cname[i].slice(1);
              }
              return 'Com' + cname.join('');
          },
      },
      mounted: function() {
  
          // Hide sidebar by default
          this.$store.dispatch('toggleSidebar', false);
          $('#content').addClass('sidebar-hidden');
      },
  });
  </code></pre>
  
  <p>HTML / Twig Code: <a href="http://git.dannysmc.com/snippets/64" rel="nofollow noreferrer">http://git.dannysmc.com/snippets/64</a> - Also pasted below:</p>
  
  <pre><code>    {% block body %}
      &lt;div class="content-container" id="content-pages-create"&gt;
  
          &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
          &lt;button @click="addPageRow()"&gt;Add Row&lt;/button&gt;
          &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
          &lt;!-- Page Holder --&gt;
          &lt;div class="page-holder" v-cloak&gt;
              &lt;draggable v-model="page.rows" handle=".control-drag"&gt;
                  &lt;transition-group&gt;
  
                      &lt;!-- Row Item --&gt;
                      &lt;div class="row-item" v-for="(row, row_index) in page.rows" :key="row.id"&gt;
  
                          &lt;!-- Row Controls --&gt;
                          &lt;div class="row-controls"&gt;
                              &lt;div class="control-item control-drag"&gt;&lt;i class="fas fa-arrows-alt"&gt;&lt;/i&gt;&lt;/div&gt;
                              &lt;div class="control-item control-pause"&gt;&lt;i class="fas fa-pause"&gt;&lt;/i&gt;&lt;/div&gt;
                              &lt;div class="control-item control-clone"&gt;&lt;i class="fas fa-clone"&gt;&lt;/i&gt;&lt;/div&gt;
                              &lt;div class="control-item control-edit"&gt;&lt;i class="fas fa-edit"&gt;&lt;/i&gt;&lt;/div&gt;
                              &lt;div class="control-item control-trash" @click="removeRow(row_index)"&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;!-- Row Inner --&gt;
                          &lt;div class="row-inner"&gt;
  
                              &lt;!-- Column Item --&gt;
                              &lt;div class="column-item" :class="['column-width-' + column.width]" v-for="(column, col_index) in row.columns"&gt;
  
                                  &lt;!-- Column Inner --&gt;
                                  &lt;div class="column-inner"&gt;
  
                                      &lt;!-- Component Item (Draggable) --&gt;
                                      &lt;draggable v-model="column.components" :group="'column.components'" handle=".control-dragcom"&gt;
  
                                          &lt;!-- Component Placeholder --&gt;
                                          &lt;div class="component-placeholder" v-if="column.components.length === 0"&gt;
                                              &lt;p class="text"&gt;+&lt;/p&gt;
                                          &lt;/div&gt;
  
                                          &lt;!-- Component Item --&gt;
                                          &lt;div class="component-item" v-for="(component, com_index) in column.components" :key="component.id"&gt;
  
                                              &lt;!-- Component Controls --&gt;
                                              &lt;div class="component-controls"&gt;
                                                  &lt;div class="control-item control-dragcom"&gt;&lt;i class="fas fa-arrows-alt"&gt;&lt;/i&gt;&lt;/div&gt;
                                                  &lt;div class="control-item control-clone" @click="cloneComponent(row_index, col_index, com_index)"&gt;&lt;i class="fas fa-clone"&gt;&lt;/i&gt;&lt;/div&gt;
                                                  &lt;div class="control-item control-edit"&gt;&lt;i class="fas fa-edit"&gt;&lt;/i&gt;&lt;/div&gt;
                                                  &lt;div class="control-item control-trash" @click="removeComponent(row_index, col_index, com_index)"&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt;&lt;/div&gt;
                                              &lt;/div&gt;
  
                                              &lt;!-- Component Inner --&gt;
                                              &lt;div class="component-inner"&gt;
                                                  &lt;component :is="resolveComponentName(component)"&gt;&lt;/component&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/draggable&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/transition-group&gt;
              &lt;/draggable&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  <p>The rows move as expected, so I can fully move the rows around as expected and sort them and it works and it updates the array correctly. But when I try to move the components around, it seems to move as expected, so you can move it around, but when you let go of the drag, it does not stay there, and reverts back to what it was.</p>
  
  <p>I did some looking around but could not find any ways of fixing it.</p>
  
  <p>I am really stuck on what to do, so any suggestions or help would be amazing, thanks in advance.</p>