JSFiddle - React, Tailwind, and code Playground

by javad ebrahimi

HTML

<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(x) {
    	this.things.push('another thing ' + x);
    }
  }
});

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

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