title: Compile Vue components that are dynamically added to the DOM
body: <p>We have a web app that uses Vue as the front end framework.</p>
  
  <p>This web app has a text editor, and as part of the functionality of the text editor, it will add custom HTML to the editable area (a <code>contenteditable</code> <code>div</code>.)</p>
  
  <p>The editor can add HTML which is a Vue component but I need some way of compiling the Vue component before/after inserting it into the DOM.</p>
  
  <p>For example, let's assume we have a <code>contenteditable</code> div like so:</p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
      &lt;p&gt;Some text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, on a user action, after the <code>&lt;p&gt;</code> tag, the editor will insert an Vue component.</p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
      &lt;p&gt;Some text&lt;/p&gt;
      &lt;custom-gallery&gt;&lt;/custom-gallery&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>&lt;custom-gallery&gt;&lt;/custom-gallery&gt;</code> is a Vue component. How do I 'execute' this component so it renders the HTML, event handlers etc?</p>
  
  <p>One idea I had is to insert an element like:</p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
      &lt;p&gt;Some text&lt;/p&gt;
      &lt;div class="custom-gallery"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and then execute this:</p>
  
  <pre><code>import Vue from 'vue'
  import CustomGallery from './path/to/components/CustomGallery.vue'
  
  new Vue({
      el: document.querySelector(".custom-gallery"),
      render: h =&gt; h(CustomGallery)
  })
  </code></pre>
  
  <p>Would that be the best way? Will that work if it's already inside a Vue application?</p>