JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.common.dev.min.js"></script>
<div id="app">
<h1>Component Test</h1>
<my-component ref="foo"></my-component>
</div>

<button id="externalButton">External Button</button>

JavaScript

var MyComponent = Vue.extend({
  template: '<div><p>Hello</p><ul><li v-for="thing in things">{{ thing }}</li></ul></div>',
  data: function() {
    return {
      things: ['first thing']
    };
  },
  methods: {
  	addThing: function() {
    	this.things.push('another thing ' + this.things.length);
    }
  }
});

var vm = new Vue({
  el: '#app',
  components: {
  'my-component': MyComponent
  }
});

document.getElementById("externalButton").onclick = function () {
	vm.$refs.foo.addThing();
};