component for rating, accept decimals

StarRating.vue

<template>
    <div>
        <i class="fa fa-star" aria-hidden="true" v-for="i in completeStarts(rating)"></i>
        <i class="fa fa-star-half-o" aria-hidden="true" v-if="haveHalfStart(rating)"></i>
        <i class="fa fa-star-o" aria-hidden="true" v-for="x in incompleteStarts(rating)"></i>
    </div>
</template>
<script>
    export default {
        name: 'StarRating',
        props: {
            rating: {
                required: true,
            }
        },
        mounted() {
            console.log(this.rating)
        },
        methods: {
            completeStarts: function (rating) {
                if (rating > 0) {
                    return Math.floor(rating)
                }
                return 0
            },
            haveHalfStart: function (rating) {
                return (rating % 1) > 0
            },
            incompleteStarts: function (rating) {
                if (rating > 0) {
                    return 5 - Math.ceil(rating)
                }
                return 5
            }
        }
    }
</script>