v-html not rendering vue component in Vue 2

Question

I am trying render a component using props. But only works when content props is not a component.

Here is an example: https://jsfiddle.net/eugenio4/onf54vt5/

// register modal component
Vue.component('component', {
  template: '<span class="component-tag">This is component</span>',
})

// start app
new Vue({
  el: '#app',
  data: function (){
    return {
        test1 : '<label>this is label</label>',
        test2 : '<component></component>' //this doest work
    }
  }
})

<!-- app -->
<div id="app">  
  <span v-html="test1"></span>
  <span v-html="test2"></span>
</div>

Is this possible?

Answer 1

No, You can not do this using v-html, as documentation clearly points out:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates.

The contents are inserted as plain HTML - data bindings/vue components are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.