JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="app">
  <!-- The use of inline-template is required for my solution to work -->
  <simple-counter inline-template>
    <button v-bind:style="style" v-on:click="add">clicks: {{ counter }}</button>
  </simple-counter>
  <simple-counter inline-template>
    <button v-on:click="counter += 1">{{ counter }}</button>
  </simple-counter>
</div>

<button id="mutate">Mutate</button>

JavaScript

// simple counter component
window.simpleCounterComponent = 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 = (selector) => new Vue({
  el: '#app'
});

// expose the instance for later use
window.v = initV();

var counterTemplate = `<div is="simple-counter" inline-template>
                        <button v-bind:style="style" v-on:click="add">
                          click to add: 
                          <span class="inactive" v-bind:class="{ active: true }">
                            {{ counter }}
                          </span>
                        </button>
                       </div>`;

// click handler that will add a new `simple-counter` template to the Vue.el scope
$('#mutate').click(function(){
    var appended = $(counterTemplate).appendTo('#app')
    console.log(appended);
    var instance = new simpleCounterComponent({
      el: appended.get(0)
    });
    console.log(instance)

})