JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<table id="demo">
  <tr>
    <td>X</td>
    <td>Y</td>
    <td>Z = X * Y</td>
  </tr>
  <tr is="multiplier"></tr>
  <tr is="multiplier"></tr>
  <tr is="multiplier"></tr>
  <tr is="multiplier"></tr>
</table>

<script type="text/x-template" id="multiplier">
	<tr>
    <td><button v-on:click"addRow()"></button></td>
    <td><input type="text" v-model="x"></td>
    <td><input type="text" v-model="y"></td>
    <td><input type="text" v-model="result"></td>
  </tr>
</script>

JavaScript

Vue.component('multiplier', {
	template: '#multiplier',
	data: function () {
  	return {
    	x: 0, y: 0
    }
  },
   methods: {
  	addRow: function(){
    alert('foo');
    }
  },
  computed: {
  	result: function () {
    	return this.x * this.y;
    }
 
  }
});

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