title: How to add different components to the page on-the-fly with Vue.js
body: <p>My goal is to allow the user to dynamically build a form from different components, based on what they choose in a select element.  For example, they can choose to add a Heading, then maybe a Paragraph, then another Heading, etc.  Each "part" is a separate Component.  </p>
  
  <p>I know this sort of thing has been asked before, but I'm only day 2 into Vue and I think I'm 90% of the way there - I'm just missing something.  What I believe I'm stuck on is how to add a component to my app's data to allow Vue to render it out.</p>
  
  <p>Here is the relevant markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="creator"&gt;
      &lt;template v-for="part in existingParts"&gt;
          &lt;component :is="part"&gt;&lt;/component&gt;
      &lt;/template&gt;
      &lt;select class = "custom-select" id = "new-part-chooser" v-model="newPart" v-on:change="addPart"&gt;
          &lt;option disabled value = ""&gt;Add a new part&lt;/option&gt;
          &lt;option
              v-for="part in possibleParts"
              v-bind:value="part.toLowerCase()"
              &gt;{{ part }}&lt;/option&gt;
      &lt;/select&gt;
      &lt;?php
          // These simply bring in the templates for the components
          // I know this isn't standard practice but... one thing at a time
          include 'component-heading.html';
          include 'component-paragraph.html';
      ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my javascript file:</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.component("part-heading",{
      data:function(){
          return {
              text: ""
          }
      },
      template:"#component-heading-template"
  });
  Vue.component("part-paragraph",{
      data:function(){
          return {
              text: ""
          }
      },
      template:"#component-paragraph-template"
  });
  
  const Creator = new Vue({
      el:"#creator",
      data:{
          newPart:"",
          possibleParts:[
              "Heading",
              "Paragraph"
          ],
          existingParts:[]
      },
      methods:{
          addPart:function(e){
              /*** This is where I'm stuck - what do I push here? ***/
              this.existingParts.push();
          }
      }
  });
  </code></pre>
  
  <p>I've read through the docs and Google'd the hell out of the topic, but every setup seems to be just different enough that I can't figure out how to apply it.</p>