StarRating.vue

<template>
  <div>
    <span v-for="n in 5" :key=n>
      <fa 
        :icon="[rating >= n ? 'fas' : 'far', 'star']"
        @mouseover="rating = n"
        @mouseleave="rating = 0"
        @click="$emit('rated', rating)"
      />
    </span>
  </div>
</template>

<style scoped>
  span {
    cursor: pointer;
  }
</style>

<script>
  export default {
    data() {
      return {
        rating: 0
      };
    }
  }
</script>