Laravel Like System with Vue JS

I am create a blog website which the owner of the website has the ability to create or write a blog or a book.

Now we will focus on writing a book. I got it all working so far. She can make a book and add chapters on it. Now she said that the readers have the ability to like each chapters.

what I made is like this

ReadChapter.blade.php

    <section id="main-content">
      <div class="chapter-container">
        <div class="chapter-title text-center"></div>
        <community-reaction :chapter_id="" :view_counts="" :user_id=""></community-reaction>
        <div class="chapter-body" oncopy="return false" onpaste="return false" oncut="return false">
          {!!$the_chapter->body!!}
        </div>
      </div>
    </section>

CommunityReactionComponent.vue

<template>
  <div>
    <div class="community-chapter-reaction-section">
      <div><i class="fas fa-eye"></i> </div>
      <div style="cursor: pointer;" v-if="!loved_chapter"><i class="fas fa-heart" @click="loveChapter(chapter_id)"></i> </div>
      <div style="cursor: pointer;" v-else><i class="fas fa-heart" style="color: red;" @click="unloveChapter(chapter_id)"></i> </div>
      <div><i class="fas fa-comments"></i> 0</div>
    </div>
  </div>
</template>

    <script>
      export default {
          props: ['chapter_id', 'view_counts', 'user_id'],
          data() {
              return {
                  love_count: 0,
                  loved_chapter: false,
                  chapter_lovers_id: []
              }
           },
           methods: {
               loveChapter(id) {
                   axios.post('/love-chapter/', {chapter_id: id}).then(result => {
                       this.getChapterLoves();
                   });
               },
               unloveChapter(id) {
                   axios.post('/unlove-chapter/', {user_id: this.user_id, chapter_id: id}).then(result => {
                   this.getChapterLoves();
                   });
               },
               getChapterLoves() {
                   this.chapter_lovers_id = [];
                   axios.post('/get-chapter-love', {id: this.chapter_id}).then(result => {
                   this.love_count = result.data.length;
                   for(let i in result.data) {
                         
                       this.chapter_lovers_id.push(result.data[i].user_id);
                   }
                   let love_checker = this.chapter_lovers_id.includes(this.user_id);

                        if(love_checker == true) {
                            this.loved_chapter = true;
                        } else {
                            this.loved_chapter = false;
                        }
                   });
                        }
                },
                created() {
                        this.getChapterLoves();
                    }
            }
    </script>

Loving or Liking the chapter is all working fine. All I have to ask is, is this okay? or is there any efficient way on doing this? thank you!

Also don't bother to think that why I didn't make this a 1 whole Vue Component. I just want to refresh my Laravel Skill since most of my work is pure Vue JS with Laravel Backend. This project is for refreshing my knowledge on Laravel and learning something new from it. Thanks!

via Chebli Mohamed