JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
  <!-- EXERCISE 1: Bind the "shapeStyles" data property to the "style" attribute. 
  When clicking the below shape, change the shape from round to squared or 
  vice versa. 
  HINT: Use Vue.set to manipulate the data property. Use the "border-radius" 
  CSS property for round corners. -->
  <div class="shape" :style="shapeStyles" @click="onChangeStyle"></div>
  
  <!-- EXERCISE 2: Apply the "highlighted" class to every second row in the below 
  table. HINT: Use the modulus operator together with the v-for loop index. -->
  <h1>Employees</h1>
  
  <table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Company</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(employee, index) in employees" :class="{ highlighted: index % 2 == 0 }">
        <td>{{ employee.name }}</td>
        <td>{{ employee.title }}</td>
        <td>{{ companyName }}</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.shape {
  width: 150px;
  height: 150px;
  background-color: blue;
}

.highlighted {
  background-color: #DECA9B;
}

.circle {
  border-radius: 50%
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	shapeStyles: {
    },
    employees: [
    	{ name: 'Abby', title: 'Accountant' },
      { name: 'Andy', title: 'Marketing Manager' },
      { name: 'Brandon', title: 'Vue.js Expert' },
      { name: 'Bob', title: 'Key Account Manager' }
    ],
    companyName: 'VueX Ltd.'
  },
  methods: {
  	onChangeStyle() {
    	if (this.shapeStyles['border-radius']) {
      	Vue.set(this.shapeStyles,'border-radius', null);
      } else {
      	Vue.set(this.shapeStyles,'border-radius', '50%');
      }
    }
  }
});