title: Vue: How to insert a component to HTML in script tag?
body: <p><strong>Context</strong>: I want to develop a community site. The users can post comments. If that post contains a URL, I want to replace it with a clickable component.</p>
  <p><strong>Reformulation of the problem</strong>:</p>
  <p>I have a string data and want to replace characters “https://…” in it with <code>&lt;my-component url:=“https://…”&gt;&lt;/my-component&gt;</code>.</p>
  <pre><code>&lt;template&gt;
    &lt;div ref=“container”&gt;
      &lt;!—- I want to insert the following content here—&gt;
      &lt;!—-The link is &lt;my-component url=&quot;https://example.com&quot;&gt;&lt;/my-component&gt;—-&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data(){
      return {
        text: &quot;The link is https://example.com&quot;
      }
    },
    mounted(){
      this.$refs.container.innerHTML = ?
      // I want to replace here.
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I can use replace function to search the target characters with regex and replace them with some characters, but don’t know how to replace with a component.</p>