title: Dynamically adding different components in Vue
body: <p>I want to create a simple form builder with Vue where users click on buttons from a menu to add different form fields to a form. I know that if there was just one type of form field to add, I could do it with something like this (<a href="https://jsfiddle.net/u6j1uc3u/32/" rel="noreferrer">https://jsfiddle.net/u6j1uc3u/32/</a>):</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;form-input v-for="field in fields"&gt;&lt;/form-input&gt;
  
    &lt;button type="button" v-on:click="addFormElement()"&gt;Add Form Element&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script type="x-template" id="form-input"&gt;
    &lt;div&gt;
      &lt;label&gt;Text&lt;/label&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>Vue.component('form-input', {
    template: '#form-input'
  });
  
  new Vue({
    el: '#app',
    data: {
      fields: [],
      count: 0
    },
  
    methods: {
      addFormElement: function() {
        this.fields.push({type: 'text', placeholder: 'Textbox ' + (++this.count)});
      }
    }
  })
  </code></pre>
  
  <p>But what if there's more than one type of form field (input, file, select, etc...)? I was thinking maybe build a different component for each type, but then how would I show multiple types of components in a single list of form elements?</p>
  
  <p>Could I maybe create a component with children components of different types based on the data in the <code>fields</code> array?</p>
  
  <p>Or is there a better way to go about this situation that I'm missing? I've just started learning Vue, so any help is appreciated!</p>