title: Vue add a component on button click
body: <p>I have three templates. AddCard.vue , ImageCard.vue and VideoCard.vue</p>
  
  <p>AddCard.vue has two buttons on it one is to add the Image Card and Other To Add the video Card.. I need to add components based on the button click. Here are three templates and my index.html file.</p>
  
  <p>index.html</p>
  
  <pre><code>   &lt;!doctype html&gt;
      &lt;html lang="en"&gt;
          &lt;head&gt;
  
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div id="app"&gt;
                   &lt;div class="container"&gt;
                      &lt;div id="dynamic_components"&gt;
                       &lt;!-- add components here --&gt;
                      &lt;/div&gt;
                      &lt;addcard&gt;&lt;/addcard&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>AddCard.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="buttons"&gt;
          ul class="no-margin-list"&gt;
                                  &lt;li @click="imagecard"&gt;
                                    &lt;span class="card_icon"&gt;
                                        &lt;img :src="'img/image.jpg'" &gt;
                                      &lt;/span&gt;
                                      &lt;p&gt;Add Image Card&lt;/p&gt;
                                    &lt;/a&gt;
                                  &lt;/li&gt;
  
                              &lt;li @click="videocard"&gt;
                                    &lt;span class="card_icon"&gt;
                                        &lt;img :src="'img/video.jpg'" &gt;
                                      &lt;/span&gt;
                                      &lt;p&gt;Add Video Card&lt;/p&gt;
                                    &lt;/a&gt;
                                &lt;/li&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      computed: {
  
      },
      methods: {
        imagecard(val) {
          //how to add image card
        },
        videocard() {
          //how to add video card 
        }
      },
  
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>ImageCard.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;h1&gt; I am a image Card &lt;/h1&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>VideoCard.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;h1&gt; I am a Video Card &lt;/h1&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I need to add components dynamically one after another in the <code>&lt;div id="dynamic_components"&gt;</code> . User can add as many as cards  they want.</p>
  
  <p>How do I add the components dynamically. Please point me to a tutorial. </p>