title: How to Add or Remove Vue.js component dynamically (programmatically or on the fly)
body: <p>Here is my code, this is just a example code, if the below works then this will help me to build something else that I am working on.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="wrapper"&gt;
      &lt;div id="divOne"&gt;
        &lt;!-- Add or remove component here dynamically --&gt;
      &lt;/div&gt;
      &lt;div id="divTwo"&gt;
        &lt;!-- Add or remove component here dynamically --&gt;
      &lt;/div&gt;
  
      &lt;!-- There will be more divs like #divOne #divTwo above --&gt;
  
      &lt;div&gt;
        &lt;input type="radio" id="one" value="divOne" v-model="pickedDiv"&gt;
        &lt;label for="one"&gt;One&lt;/label&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;input type="radio" id="two" value="divTwo" v-model="pickedDiv"&gt;
        &lt;label for="two"&gt;Two&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;button @click="addComponent"&gt;Add Component&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import SomeComponent from './SomeComponent'
  
  export default {
    data() {
      return {
        pickedDiv: '',
        pickedDivPreviously: ''
        propItems: ['item1', 'item2']
      }
    }
    methods: {
      addComponent () {
        //-- This is not working code but I need something like this --//
        this.pickedDivPreviously = this.pickedDiv // event not sure how to get previously selected div
  
        const divThatIsPicked = document.getElementById(this.pickedDiv)
        const divThatWasPickedPreviously = document.getElementById(this.pickedDivPreviously)
  
        // code here to remove/empty/destroy old component from 'divThatWasPickedPreviously'
        divThatWasPickedPreviously.innerHTML = "" 
  
        // code here to add new component in 'divThatIsPicked'
        divThatIsPicked.appendChild('&lt;some-component :someProp="propItems" @someEvent="someFn"&gt;')
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I don't want to distract you from answering actual question but If you are curious about what I am working then check <a href="https://jsfiddle.net/becjLtce/" rel="noreferrer">this</a> :) Here I am trying to add new child DIV at the end of the row when any row item is clicked. </p>
  
  <p>I will be more than happy if <a href="https://jsfiddle.net/becjLtce/" rel="noreferrer">this</a> is converted to vue than the actual question asked above, as said please don't get distracted from actual question if you find it hard :)</p>