JSFiddle - React, Tailwind, and code Playground

by smax

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-cmp></my-cmp>
  <hr>
  <my-cmp></my-cmp>
</div>

<div id="app2">
  <my-cmp></my-cmp>
  <hr>
  <my-cmp></my-cmp>
</div>

JavaScript

//var data = { status: 'Critical' };

// Vue.component('my-cmp', {});
var cmp = {
	data: function() {
  	return {
    	status: 'Critical'
    };
  },
  template: '<p>Server Status: {{ status }} (<button @click="changeStatus">Change</button>)</p>',
  methods: {
  	changeStatus: function() {
    	this.status = 'Normal';
    }
  }
};

new Vue({
	el: '#app',
  components: {
  	'my-cmp': cmp
  }
})

new Vue({
	el: '#app2'
})