Like/dislike button doesn't work with laravel and vuejs

[chana]

I follow a serie to make like/dislike button and in vue page I can see the buttons but when I click like/dislike button it doesn’t work and there’s no error too so please how to fix that
I add code in : routes , models and productController:

and I add Ratings.vue in ressources/js/components:

<template>
    <div class="likes text-right">
        <a @click="sendRating('like')" :class="{ active: currentStatus == 'like' }">
            <i class="fa fa-thumbs-up"></i> {{ likesCount }}
        </a>
        <a @click="sendRating('dislike')" :class="{ active: currentStatus == 'dislike' }">
            <i class="fa fa-thumbs-down"></i> {{ dislikesCount }}
        </a>
    </div>
    
</template>

<script>
export default {
    props: {
        'productId': Number,
        'status': String,
        'likes': Number,
        'dislikes': Number
    },
    data() {
        return {
            'likesCount': this.likes,
            'dislikesCount': this.dislikes,
            'currentStatus': this.status,
            'unrated': ''
        };
    },
    computed: {
        successMessage: function () {
            return 'You have ' + (this.currentStatus || this.unrated) + 'd this post';
        }
    },
    methods: {
        sendRating: function (type) {
            axios.post('/products/rate', {
                product_id: this.productId,
                type
            })
            .then(({data}) => {
                this.likesCount = data.likes;
                this.dislikesCount = data.dislikes;
                this.unrated = data.unrated ? ('un' + type) : '';
                this.currentStatus = !data.unrated ? type : '';
                this.$swal(
                    'Success!',
                    this.successMessage,
                    'success'
                );
            })
            .catch(({response}) => {
                var message = response.data.errors && response.data.errors[Object.keys(response.data.errors)[0]] ?
                    response.data.errors[Object.keys(response.data.errors)[0]][0] :
                    response.data.message;
                this.$swal(
                    'Error!',
                    message,
                    'error'
                );
            });
        }
    }
}
</script>

<style scoped>
.likes a {
    font-size: 1rem;
    color: #cccccc;
    padding-left: 0.5rem;
    cursor: pointer;
}
.likes a:hover {
    color: #777777;
}
.likes .active {
    color: #999999;
}
</style>

then I add in site.js:

Vue.component('ratings', require('./components/Ratings.vue').default);

then npm run watch
then in vue.blade.php I add:

<ratings
                                    :product-id="{{ $product->id }}"
                                    status="{{ auth()->check() && $product->ratings->count() ? $product->ratings->first()->pivot->type : '' }}"
                                    :likes="{{ $product->likes_count ? $product->likes_count : 0  }}"
                                    :dislikes="{{ $product->dislikes_count ? $product->dislikes_count : 0  }}"
                                ></ratings>