JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <div>
     <star-rating value="2" disabled="true"></star-rating>     
     dimensionA ::  {{dimensionA}}
  </div>
</template>

<template id="star-rating">
  <div class="star-rating">
    <label class="star-rating__star" 
    v-for="rating in ratings"
    :class="{selected: ((value >= rating && value != null))}"
    @mouseover="starOver(rating)"
    @mouseout="starOut(rating)"
    @click="setRate(rating)"
    >
    <input
    class="star-rating star-rating__checkbox"
    type="radio"
    v-model="value"
    >
    ★ 
  </label>
 </div>
</template>

JavaScript

Vue.component('my-component', {
  template: '#my-component',
  data: function () {
    return {
      dimensionA: '',
      dimensionB: '',
      dimensionC: ''
    }
  },
  methods: {
    getComment (id) {
      var self = this
      setTimeout(function () {
        self.dimensionA = 1
        self.dimensionB = 2
        self.dimensionC = 3
			}, 300)
    }
  },
  created () {
    this.getComment(1)
    console.log(this.dimensionA)
  }
});

Vue.component('star-rating', {
  template: '#star-rating',
  data() {
    return {
       value: '',
       temp_value: '',
       ratings: [1, 2, 3, 4, 5]
    }
  },
   methods: {
      starOver: function (index) {
        this.temp_value = this.value
        this.value = index
      },
      starOut: function (index) {
        this.value = this.temp_value
      },
      setRate: function (value) {
        this.temp_value = value
        this.value = value
      }
   }
});

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