JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
<h1>Component Test</h1>
<my-component ref="foo"></my-component>

<button @click="onAddThing">External Button</button>

</div>

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
  },
   mounted: function() {
  	console.log(this.$refs)
  },
  methods: {
  	onAddThing: function() {
    	this.$refs.addThing()
    }
  }
  
 
});