JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="star-app" v-cloak>
			<star-rating value="0"></star-rating>
		</div>

		<template id="template-star-rating">
			<div class="star-rating">
				<label
				class="star-rating__star"
				v-for="rating in ratings"
				:class="{'is-selected': ((value >= rating) && value != null), 'is-disabled': disabled}"
				@mouseover="star_over(rating)"
				@mouseout="star_out"
				@click="set(rating)">
				<input
				class="star-rating star-rating__checkbox"
				type="radio"
				:name="name"
				:disabled="disabled"
				:id="id"
				:required="required"
				v-model="value">
				★
			</label>
		</div>
	</template>

CSS

[v-cloak] { display:none; }

.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;
  padding: 3px;
  vertical-align: middle;
  line-height: 1;
  font-size: 1.5em;
  color: #ABABAB;
  -webkit-transition: color .2s ease-out;
  transition: color .2s ease-out;
}
.star-rating__star:hover {
  cursor: pointer;
}
.star-rating__star.is-selected {
  color: #FFD700;
}
.star-rating__star.is-disabled:hover {
  cursor: default;
}

JavaScript

'use strict';

Vue.component('star-rating', {
	template: '#template-star-rating',
	data: function data() {
		return {
			value: null,
			temp_value: null,
			ratings: [1, 2, 3, 4, 5]
		};
	},
	props: {
		'name': String,
		'value': null,
		'id': String,
		'disabled': Boolean,
		'required': Boolean
	},
	methods: {
		star_over: function star_over(index) {
			if (this.disabled) {
				return;
			}

			this.temp_value = this.value;
			this.value = index;
		},
		star_out: function star_out() {
			if (this.disabled) {
				return;
			}

			this.value = this.temp_value;
		},
		set: function set(value) {
			if (this.disabled) {
				return;
			}
      
      // This runs twice
      console.log(value);

			this.temp_value = value;
			this.value = value;
		}
	}
});

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