JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js"></script>
<div id="app">
  <form>
    <div>
      <label for="year">Per Year</label>
      <input type="radio" name="frequency" id="year" value="year" v-model="frequency" checked>
      <label for="month">Per Month</label>
      <input type="radio" name="frequency" id="month" value="month" v-model="frequency">
    </div>
  </form>
  
  <table>
    <tr>
      <td>
        <plan-component :frequency="frequency" 
                        name="Basic"
                        price-yearly="Free"
                        price-monthly="Free"
        ></plan-component>
      </td>
      <td>
        <plan-component :frequency="frequency" 
                        name="Recreational"
                        price-yearly="$10"
                        price-monthly="$5"
        ></plan-component>
      </td>
      <td>
        <plan-component :frequency="frequency" 
                        name="Basic"
                        price-yearly="$25"
                        price-monthly="$15"
        ></plan-component>
      </td>
      <td>
        <plan-component :frequency="frequency" 
                        name="Basic"
                        price-yearly="$100"
                        price-monthly="$50"
        ></plan-component>
      </td>
    </tr>
  </table>
  <h1>You have selected {{ activePlan.name }} plan</h1>
  <h1>Total to pay = {{ activePlan.price }}</h1>

  <template id="plan-component">
    <h1>{{ name }}</h1>
    <div>
      <span>{{ price }}</span>
    </div>
    <a class="select-plan" v-on:click="makeActivePlan($event)" href="#">Select this plan</a>
  </template>
    
</div>

CSS

td {
  width:25%;
  border: 1px solid black;
}

JavaScript

Vue.component('plan-component', {
	template: '#plan-component',
  
  props: ['frequency', 'name', 'priceYearly', 'priceMonthly'],
  
  computed: {
  	'price': function() {
    	if (this.frequency === 'year') {
      	return this.priceYearly;
      } else {
      	return this.priceMonthly;
      }
    }
  },
  
  methods: {
  	makeActivePlan() {
    	// We dispatch an event setting this to become the active plan
    	this.$dispatch('set-active-plan', this);
    }
  }
  
});

new Vue({
  el: '#app',
  data: {
    frequency: 'year',
    activePlan: {name: 'no', price: 'You must select a plan!' }
  },
  
  events: {
  	'set-active-plan': function(plan) {
    	this.activePlan = plan;
    }
  },
});