title: Vue.js - Remove specific component dynamically
body: <p>I am trying to dynamically create/remove a Vue component. I have figured out how to dynamically add the component, but I am having some troubles with allowing the users to remove the specific component.</p>
  
  <p>Consider below two Vue files:</p>
  
  <p><code>TableControls.vue</code></p>
  
  <pre><code>&lt;a v-on:click="addColumn"&gt;Add Column&lt;/a&gt;
  
  &lt;script&gt;
      export default {
          methods: {
              addColumn: function () {
                  Event.$emit('column-was-added')
              }
          }
      };
  
  &lt;/script&gt;
  
  </code></pre>
  
  <p><code>DocumentViewer.vue</code>:</p>
  
  <pre><code>&lt;div v-for="count in columns"&gt;
     &lt;VueDragResize :id="count"&gt;
        &lt;a @click="removeColumn(count)"&gt;Remove Column&lt;/a&gt;
     &lt;/VueDragResize&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  import VueDragResize from 'vue-drag-resize';
  
      export default {
          components: {
              VueDragResize
          },
          data() {
              return {
                  columns: [1],
              }
  
          },
          created() {
              Event.$on("column-was-added", () =&gt; this.addColumn())
          },
  
          methods: {
              addColumn: function () {
                  this.columns.push(this.columns.length + 1)
              },
              removeColumn: function (id) {
                  this.columns.splice(id, 1)
              }
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see, whenever a user clicks on <code>&lt;a v-on:click="addColumn"&gt;Add Column&lt;/a&gt;</code>, it will submit an event, and the <code>DocumentViewer.vue</code> file will pick up it, firing the <code>addColumn</code> method. This will ultimately create a new <code>&lt;VueDragResize&gt;&lt;/VueDragResize&gt;</code> component.</p>
  
  <p>This works great.</p>
  
  <p>The problem is when I want to remove the component again. My <code>removeColumn</code> method simply removes an id from the <code>columns</code> array:</p>
  
  <pre><code>removeColumn: function (id) {
      this.columns.splice(id, 1)
  }
  </code></pre>
  
  <p>This results in that a column is in fact removed. However, consider below example. When user clicks on the remove icon for the first column, it will remove the 2nd column instead. (And when there is only one column present, it cannot be removed).</p>
  
  <p><a href="https://i.stack.imgur.com/aOXy2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aOXy2.png" alt="Vue Example"></a></p>
  
  <p>I believe this is due to the fact that I <code>splice()</code> the array, but I cannot see how else I can remove the component dynamically?</p>