JSFiddle - React, Tailwind, and code Playground

HTML

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

<template id="my-component">
  <div>
     <star-rating :data="dimensionA"></star-rating>     
     dimensionA ::  {{dimensionA}}
     <star-rating :data="dimensionB"></star-rating> 
     dimensionB ::  {{dimensionB}}
  </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.prevent="setRate(rating)"
    >
    <input
    class="star-rating star-rating__checkbox"
    type="radio"
    v-model="value"
    >
    ★ 
  </label>
 </div>
</template>

CSS

.star-rating__checkbox {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

.star-rating__star {
  display: inline-block;
  vertical-align: middle;
  padding: 0 0.06rem;
  line-height: 1;
  font-size: 18px;
  color: #ababab;
  transition: color .2s ease-out; 
}
.star-rating__star:hover {
  cursor: pointer; 
}
.star-rating__star.selected {
  color: #ffd700; 
}

JavaScript

Vue.component('my-component', {
  template: '#my-component',
  data: function () {
    return {
      dimensionA: '',   // the value here doesn't change, which render the star
      dimensionB: 2
    }
  },
  methods: {
    getComment (id) {
      var self = this
      setTimeout(function () {
        self.dimensionA = 1
        self.dimensionB = 2
			}, 300)
    }
  },
  created () {
    this.getComment(1)
    alert(this.dimensionA)  // this.demensionA's value didn't change
  }
});

Vue.component('star-rating', {
  template: '#star-rating',
  props: ['data'],
  data() {
    return {
       value: this.data,
       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
      }
   },
   watch:{
      data: function(newVal){
         this.value = newVal
      }
   }
});

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