title: How to render components dynamically in Vue JS?
body: <p>I am making a form generator, which uses components in it for input fields, buttons etc. I want to be able to generate the form depending on what options I pass to it.</p>
  
  <p>But I can't get it to render the components.</p>
  
  <p>I tried to return pure HTML but that won't render the components.</p>
  
  <p>I call the form generator from my Home.vue template where I want the form with an options object like this:</p>
  
  <pre><code>options: {
      name: {
          type: 'input',
          label: 'Name'
      },
      submit: {
          type: 'button',
          label: 'Send'
      }
  }
  </code></pre>
  
  <p>In template:</p>
  
  <pre><code>&lt;template&gt;
    &lt;form-generator :options="options"&gt;&lt;/form-generator&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In the form generator component I have tried multiple things like:</p>
  
  <pre><code>&lt;template&gt;
    {{ generateForm(this.options) }}
    // ... or ...
    &lt;div v-html="generateForm(this.options)"&gt;&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I include all the components like:</p>
  
  <pre><code>import {
    FormButton,
    FormInput
  } from './FormComponents'
  </code></pre>
  
  <p>Now the final part is how do I make <code>FormInput</code> render?</p>
  
  <p>This does not work since it outputs the HTML literally:</p>
  
  <pre><code>methods: {
    generateForm(options) {
  
      // .. do stuff with options ..
      var form = '&lt;form-input /&gt;'
  
      return form
    }
  }
  </code></pre>