title: How can I dynamically nest vue components?
body: <p>I want to add one component inside other when user clicks a button. but how can we render the component in the virtual dom.
  I tried using v-html but its not working.
  Whats the best way to solve this issue?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default {
      data(){
          return{
              elements : {
                  hotel : '&lt;hotel-form&gt;&lt;/hotel-form&gt;'
              },
              
  
          }
      },
    methods:{
        addHotel(){
            
            console.log('add');
        }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="container" style="margin-top:300px;"&gt;
        &lt;div class="row" id="mainform"&gt;
            &lt;div v-for="item in elements"&gt;
                &lt;div v-html="item"&gt;&lt;/div&gt;
            &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;button @click="addHotel()"&gt;add hotel&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>