title: Vue.js mount component after DOM tree mutation to add a vue component
body: <p>I have a use case (below) where I need to <code>mount</code> (if thats the correct term) a Vue.js component template that was inserted into the DOM via jQuery, I can setup a Mutation Observer or react to certain events that are triggered when the mutation happens.</p>
  
  <blockquote>
    <p>I am using Vue.js v2</p>
  </blockquote>
  
  <p>Here is a simple example I put together to illustrate the point:</p>
  
  <blockquote>
    <p>live jsFiddle <a href="https://jsfiddle.net/w7q7b1bh/2/" rel="nofollow noreferrer">https://jsfiddle.net/w7q7b1bh/2/</a></p>
  </blockquote>
  
  <p>The HTML below contains <code>inlined-templates</code> for two components</p>
  
  <pre><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;!-- The use of inline-template is required for my solution to work --&gt;
    &lt;simple-counter inline-template&gt;
      &lt;button v-bind:style="style" v-on:click="add"&gt;clicks: {{ counter }}&lt;/button&gt;
    &lt;/simple-counter&gt;
    &lt;simple-counter inline-template&gt;
      &lt;button v-on:click="counter += 1"&gt;{{ counter }}&lt;/button&gt;
    &lt;/simple-counter&gt;
  &lt;/div&gt;
  
  &lt;button id="mutate"&gt;Mutate&lt;/button&gt;
  </code></pre>
  
  <p>The js:</p>
  
  <pre><code>// simple counter component
  Vue.component('simple-counter', {
    data: function() {
      return {
        counter: 0,
        style: {
          color: 'red',
          width: '200px'
        }
      }
    },
    methods: {
      add: function() {
        this.counter = this.counter + 1;
        this.style.color = this.style.color == 'red' ? 'green' : 'red';
      }
    }
  })
  
  // create the Vue instance
  var initV = () =&gt; new Vue({
    el: '#app'
  });
  
  // expose the instance for later use
  window.v = initV();
  
  // click handler that will add a new `simple-counter` template to the Vue.el scope
  $('#mutate').click(function(){
      $('#app').append(`  &lt;div is="simple-counter" inline-template&gt;
      &lt;button v-bind:style="style" v-on:click="add"&gt;click to add: &lt;span class="inactive" v-bind:class="{ active: true }"&gt;{{ counter }}&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;`)
      // do something after the template is incerted
      window.v.$destroy()
      window.v = initV(); // does not work
  
  })
  </code></pre>
  
  <p>As mentioned in the code, destroying the re-instantiating the Vue instance does not work, I understand why, the templates for the components are changed on first Vue instantiation to their final HTML, when you try and instantiate a second time, templates are not there, components are not <code>mounted</code></p>
  
  <p>I'd like to be able to find the newly added components after mutation and mount only those, is that possible? and how?</p>
  
  <p><strong>UPDATE:</strong>
  I was able to find a way to do it via instantiating a new Vue instance with el set to the specific mutated part of the DOM as opposed to the whole <code>#app</code> tree:</p>
  
  <pre><code>$('#mutate').click(function(){
      var appended = 
              $(`
         &lt;div is="simple-counter" inline-template&gt;
           &lt;button v-bind:style="style" v-on:click="add"&gt;
             click to add: {{ counter }}
           &lt;/button&gt;
         &lt;/div&gt;`
        ).appendTo($('#app'));
  
      var newV = new Vue({el: appended[0]});
  });
  </code></pre>
  
  <p>Seems to work, but also looks ugly and I am not sure what other implications this might have..</p>
  
  <p><strong>Use Case:</strong></p>
  
  <p>I am working on a way to write Vue.js components for a CMS called Adobe Experience Manager (AEM).</p>
  
  <p>I write my components using <code>inlined-template</code> which gives me the advantage of SEO as well as server-side rendering using another templating language called HTL.</p>
  
  <p>The way AEM authoring works is that, when a component is edited (via a dialog), that specific component is re-rendered on the server-side then injected back to the DOM to replace the old component, all done via Ajax and jQuery (no browser refresh).</p>
  
  <p>Here is an example</p>
  
  <p>AEM component template:
  <code>&lt;button&gt;${properties.buttonTitle}&lt;/button&gt;</code></p>
  
  <p>Here is what an author might do:</p>
  
  <ol>
  <li>author visits the authoring page</li>
  <li>opens the button component dialog to edit</li>
  <li>changes the buttonTitle to "new button title"</li>
  <li>Saves</li>
  </ol>
  
  <p>upon saving, an ajax is sent, the component HTML is re-rendered on the server and returned is the new HTML. That HTML now replaces the old HTML via jQuery (mutates the DOM)</p>
  
  <p>This is fine for static components, but if this was a Vue.js component, how do I dynamically mount it while keeping other components mounted.</p>
  
  <blockquote>
    <p>An easy solution to this is to refresh the page... but that is just bad experience... There has to be a better way.</p>
  </blockquote>