title: Vue js render text with html content
body: <p>What i'm trying to do is have a root element with a prop that holds inner html like: <code>hello&lt;b&gt;hey&lt;/b&gt;</code>
  but i can't use v-html because this element also has children for example:</p>
  <pre><code>&lt;template&gt;
    &lt;component :is=&quot;element.tag&quot; contenteditable=&quot;true&quot;&gt;
      &lt;div contenteditable=&quot;false&quot;&gt;
        &lt;span class=&quot;delete-obj&quot; :id=&quot;'delete'+element.id&quot; &gt;delete&lt;/span&gt;
      &lt;/div&gt;
      &lt;RenderString :string=&quot;element.content&quot; /&gt;
    &lt;/component&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import Vue from &quot;vue&quot;;
    
      Vue.component(&quot;RenderString&quot;, {
          props: {
              string: {
                  required: true,
                  type: String
              }
          },
          render(h) {
              const render = {
                  template:  this.string ,
                  methods: {
                      markComplete() {
                          console.log('the method called')
                      }
                  }
              }
              return h(render)
          }
      })
      export default {
          name: &quot;VElement&quot;,
          props: {
              element: {
                  required: false,
                  default: null
              },
          },
      }
   &lt;/script&gt;
  </code></pre>
  <p>I have tried the above and I have tried using slots. I can solve it with vanilla JavaScript like <code>element.innerText</code>, but I don't want to. The main goal is that the element is editable when they type they are editing element.content that will be rendered and the div that's inside it is normal HTML that I also need.
  The main problem is that the inner HTML that I want doesn't have a root element.
  The element is something like:</p>
  <pre><code>{id:1,tag:&quot;div&quot;,content:&quot;hello&lt;b&gt;hey&lt;/b&gt;&quot;}
  </code></pre>
  <p>I want the final result to be:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div contenteditable=&quot;true&quot;&gt;
      &lt;div contenteditable=&quot;false&quot;&gt;
          &lt;span class=&quot;delete-obj&quot; :id=&quot;'delete'+element.id&quot; &gt;delete&lt;/span&gt;
      &lt;/div&gt;
      hello&lt;b&gt;hey&lt;/b&gt;
  &lt;div&gt;
  </code></pre>
  <p>And I want to edit <code>hello&lt;b&gt;hey&lt;/b&gt;</code> when I click inside I don't want it wrapped in anything else and if I put v-html on the outer div the inner div is gone.</p>