JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<div id="root">
  
  <vue-calculator>calculator 1</vue-calculator>
  <vue-calculator>calculator 2</vue-calculator>
  <vue-calculator>calculator 3</vue-calculator>
  <vue-calculator></vue-calculator>
  
</div>

CSS

vue-calculator {
  display: block;
  margin: 20px;
  padding: 20px;
  border: 2px solid gray;
}

JavaScript

'use strict';


class Calculator {
	constructor() {
  	this.items = [Math.floor(1e2 / Math.random())];
  }
  add(item) {
  	console.log(item);
  	this.items.push(item);
  }
  calc() {
  	var str = this.items.join('');
  	var fn = new Function(`return ${str}`);
  	return fn();
  }
  destroy() {
  	console.log('destroy');
  }
};


Vue.component('vue-calculator', {
	replace: false,
	template: `
  	<div>
    	<span v-html="items" style="border: 1px solid green;"></span></br>
      <button v-on:click="calculator.add(1)">add (1)</button>
    	<button v-on:click="calculator.add(2)">add (2)</button>
    </div>
    <slot></slot>
  `,
  // http://vuejs.org/api/#Options_\/_Lifecycle_Hooks
  init: function() {
  	this.calculator = new Calculator();
    // не знаю как правильно, надо доку читать =)
    Vue.util.extend(this.$data, this.calculator); 
  },
  destroyed: function() {
  	this.calculator.destroy();
  },
});


new Vue({
	el: '#root'
});