title: Vue - Render an element out of string
body: <p>I would like to create a vue element from a string from my database.</p>
  
  <p>In this case, it should be a message with a smiley emoji.
  I actually save it like: <code>Some text with Emoji: :santa::skin-tone-3:</code>, and replace all valid string between '::' with the <code>&lt;Emoji emoji=':santa::skin-tone-3:' :size='16' /&gt;</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;span class=message v-html=convertedMessage&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import { Emoji } from 'emoji-mart-vue'
  
    export default {
      components: {
        Emoji
      },
      computed:{
        convertedMessage(){
          return "Some text with Emoji: "+"&lt;Emoji emoji=':santa::skin-tone-3:' :size='16' /&gt;"
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>But instead of the rendered element which should be something like:</p>
  
  <pre><code>&lt;span data-v-7f853594="" style="display: inline-block; width: 32px; height: 32px; background-image: url(&amp;quot;https://unpkg.com/emoji-datasource-apple@4.0.4/img/apple/sheets/64.png&amp;quot;); background-size: 5200%; background-position: 15.6863% 41.1765%;"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I only get:</p>
  
  <pre><code>&lt;emoji emoji=":santa::skin-tone-3:" :size="16"&gt;&lt;/emoji&gt;
  </code></pre>
  
  <p>What is the best possibility to render this Element like intended?</p>