JSFiddle - React, Tailwind, and code Playground

by wistcc

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <comp1></comp1>
  <comp2></comp2>
</div>

JavaScript

var comp1 = Vue.component('comp1',{
  template: '<h1>Component {{compNumber}}</h1>',
  data: function(){
  	return {
    	number: 0
      }
  },
  computed: {
  	compNumber() {
    	return this.number +1;
    }
  }
});

var comp2 = comp1.extend({
	name: 'comp2',
  template: '<h2>Component {{compNumber}}</h2>',
  computed: {
  	compNumber() {
    	return this.number +2;
    }
  }
})

new Vue({
	el: '#demo',
  components: {
    comp1,
    comp2
  }
 })