JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vue">
<table>
<tr>
<th>Object Name</th>
<th>Data Piece 1</th>
<th>Data Piece 2</th>
<th>Data Piece 3</th>
</tr>
<template v-for="obj in objects">
<tr> 
  <th rowspan="2">{{ obj.name }}</th>
  <td v-for="dataPiece in obj.objectData">{{ compute(dataPiece.prop1) }}</td>
</tr>
<tr><td v-for="dataPiece in obj.objectData">{{ compute(dataPiece.prop2) }}</td></tr>
</template>
</table>
<span>Computed prop1 value = {{ firstProp }}</span>
</div>

CSS

th, td {
  border: 1px solid black;
}

JavaScript

var vueData = {
  objects: [
    {name: 'Object 1', objectData: [
      {prop1: '1-1-1', prop2: '1-1-2'},
      {prop1: '1-2-1', prop2: '1-2-2'},
      {prop1: '1-3-1', prop2: '1-3-2'}]},
    {name: 'Object 2', objectData: [
      {prop1: '2-1-1', prop2: '2-1-2'},
      {prop1: '2-2-1', prop2: '2-2-2'},
      {prop1: '2-3-1', prop2: '2-3-2'}]},
    {name: 'Object 3', objectData: [
      {prop1: '3-1-1', prop2: '3-1-2'},
      {prop1: '3-2-1', prop2: '3-2-2'},
      {prop1: '3-3-1', prop2: '3-3-2'}]},
  ]
};

var vue = new Vue({
	el: document.getElementById("vue"),
  data: vueData,
  methods: {
  	compute: function(prop) {
    	console.log('computing ' + prop);
    	return 'computed(' + prop + ')';
    }
  },
  computed: {
  	firstProp: function() {
    	return this.objects[0].objectData[0].prop1;
    }
  }
});

setTimeout(function (){
	vueData.objects[0].objectData[0].prop1 = 'changed on timeout';
}, 3000);