title: Vue.js Riddle - Append component from string HTML
body: <p>I have the following problem - Imagine a web blog article, it has paragraphs of text and few in-text photos from the gallery.</p>
  
  <p>I'm getting the text in an array of HTML strings.</p>
  
  <p>for example : </p>
  
  <pre><code>{
   0 : '&lt;p&gt; text text text'&lt;p&gt;,
   1 : '&lt;p&gt; text text text &lt;/p&gt;',
   2 : '&lt;span class="embed" data-id="111"&gt;&lt;/span&gt;',
   3 : '&lt;p&gt; text text text &lt;/p&gt;,
  }
  </code></pre>
  
  <p><strong>I output the html via <code>v-html</code> directive after joining it with <code>.join()</code></strong></p>
  
  <p>What I need to do is somehow replace the SPAN before outputing the HTML with a vue.js component for embeded photo, for ex.: </p>
  
  <pre><code>&lt;EmbedPhoto :id="data-id" @click="toggleGallery()"&gt;&lt;/EmbedPhoto&gt;
  </code></pre>
  
  <p>I'm having no luck so far, first I tried outputing it as simple RAW html, but realised quick that the directives won't work. Any thoughts on how to replace this string with a component in the exact same place where the span is?</p>
  
  <p>Thanks!</p>