title: Vue.js - How to add components inside rendered HTML
body: <p>I need to format a Wordpress-based website editor from being fully pre-rendered to being rendered through Vue.JS.
  The editor's backend (done in PHP) sends me the HTML of the elements on the page. I want to render the page with Vue.js templates/components, with the HTML from the backend, for each element.
  It would look something like:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div v-html="element.htmlContent"&gt;&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The problems is that these elements can also have children. Not only that, but some of the elements with children (for example accordions) could look like this:</p>
  
  <pre><code>&lt;parent&gt;
      &lt;div class="wrapper"&gt;
          &lt;child&gt;&lt;/child&gt;
      &lt;/div&gt;
  &lt;/parent&gt;
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>&lt;parent&gt;
      &lt;div class="wrapper1"&gt;
          ...
              &lt;div class="wrapperN"&gt;
                  &lt;child&gt;&lt;/child&gt;
              &lt;/div&gt;
          ...
      &lt;/div&gt;
  &lt;/parent&gt;
  </code></pre>
  
  <p>Where the divs that wrap the child element belong to the parent element (in the HTML sent by the server).</p>
  
  <p>Here's a real-life example of the object I'm supposed to convert into a component based interface.</p>
  
  <pre><code>{
  id: 1,
  html: "&lt;div&gt;%%%%THIS_SHOULD_BE_REPLACED_WITH_COMPONENT_BASED_ON_CHILD_HTML_WITH_ID_2%%% ... &lt;/div&gt;",
  children: [
      {
          id: 2,
          html: "&lt;div&gt;This is the final content&lt;/div&gt;",
          children: []
      },
      {
          id: 3,
          html: "&lt;div&gt;%%%%THIS_SHOULD_BE_REPLACED_WITH_COMPONENT_BASED_ON_CHILD_HTML_WITH_ID_5%%%&lt;/div&gt;",
          children: [
              {
                  id: 5,
                  html: "&lt;div&gt;This is the final content&lt;/div&gt;",
                  children: []
              }
          ]
      },
      {
          id: 4,
          html: "&lt;div&gt;&lt;div&gt;%%%%THIS_SHOULD_BE_REPLACED_WITH_COMPONENT_BASED_ON_CHILD_HTML_WITH_ID_6%%%&lt;/div&gt;&lt;div&gt;%%%%THIS_SHOULD_BE_REPLACED_WITH_COMPONENT_BASED_ON_CHILD_HTML_WITH_ID_7%%%&lt;/div&gt;&lt;/div&gt;",
          children: [
              {
                  id: 6,
                  html: "&lt;div&gt;This is the final content&lt;/div&gt;",
                  children: []
              },
              {
                  id: 7,
                  html: "&lt;div&gt;This is the final content&lt;/div&gt;",
                  children: []
              }
          ]
      }
  ]
  </code></pre>
  
  <p>}</p>
  
  <p>Now the question is: How do I render these children INSIDE the parent's HTML while also having them as components?</p>