Недавно добавленный пост принимает количество лайков и комментариев предыдущего поста в проекте vue.js / laravel

Сейчас я изучаю vue.js. Тем не менее, мне сложно отладить ошибку в проекте, над которым я работаю в данный момент, - в приложении, похожем на блог, с Laravel в качестве серверной части. В моем домашнем файле blade.file у меня есть корневой компонент под названием <timeline>, где у меня есть текстовое поле для добавления сообщения, а затем компонент под названием <posts>. Внутри <posts> у меня есть компонент <post>, в котором отображаются детали отдельных сообщений. У меня также есть компонент <feedback> для подсчета лайков и комментариев, и все они отлично работали. Однако моя проблема заключается в том, что каждый раз, когда я добавляю новый пост, новый пост вместо количества лайков и количества комментариев, равных 0, наследует обратную связь. из предыдущего поста. (Допустим, у предыдущего поста было 10 лайков и 5 комментариев, как только я вхожу в новый пост, он сразу показывает 10 лайков и количество комментариев 5 вместо 0 с момента его нового поста, и пока их нет). В свою очередь, предыдущий пост принимает отзывы предыдущего и так далее. Как мне исправить эту ошибку? Мои компоненты показаны ниже:

//Timeline component
<template>
    <div class = "timeline">
        <div class = "form-group">
            <textarea name = "body" class = "form-control" v-model = "postText" rows = "4" placeholder = "What's on your mind"></textarea>
        </div>
        <div class = "form-group">
            <button type = "button" class = "btn btn-primary" @click.prevent = "sendPost">Post</button>
        </div>
        <hr>
        <posts :posts = "posts"></posts>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                postText: '',
                posts: []
            }
        },
        methods: {
            loadPost(){
                axios.get('/post').then(response => {
                    console.info(response.data);
                    this.posts = response.data;
                })
            },
            sendPost(){
                if (!this.postText || this.postText.trim() === ''){
                return;
             }

             //send to db
             axios.post('/post', {
                body: this.postText.trim()
             }).then(response=> {
                console.info(response);
                this.loadPost();
             });
             this.postText = '';
            }
        },
        mounted(){
            this.loadPost();
        }
    }
</script>

//posts component
<template>
    <div class = "posts">
        <div v-for = "post in posts">
            <post :post = "post"></post>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['posts']
    }
</script>

Вот мой пост-компонент

<template>
    <div class = "post">
        <div class = "media">
            <a class = "pull-left" href = "#">
                <img :src = "'/images/profile_pix/avatar.png'" class = "media-object center-block" alt = "#"/>
            </a>
            <div class = "media-body">
                <h5><strong> {{ post.user.username }}</strong></h5>
                <small>{{ post.created_at }}</small>
                  <p>{{ post.body }} </p>
                <feedback :post = "post"></feedback>
            </div>
        </div><hr>
      </div>
</template>

<script>
    export default {
        props: ['post']
    }
</script>

и вот мой компонент обратной связи

<template>
    <div class = "feedback">
        <span v-if = "liked"><a href = "#" @click.prevent = "unLikeApost"><i class = "fa fa-thumbs-down"></i>Unlike</a></span>
        <span v-else = "liked"><a href = "#" @click.prevent = "likeApost"><i class = "fa fa-thumbs-up"></i>Like</a></span>
        <span><small> {{likes}} </small></span>                        
        <span>
          <a href = "#"><i class = "fa fa-comment"></i></a>&nbsp <small> {{ comments }} </small>
        </span>
        <span v-if = "author">
          <a href = "#" v-if = "author" class = "pull-right"><small>Delete</small></a>
        </span> 
    </div>
</template>

<script>
    export default {
      props: ['post'],
      data(){
        return {
          author: false,
          likes: '',
          liked: false,
          comments: ''
        } 
      },
      methods: {
        getLikes(){
          axios.get('/likes/'+this.post.id+'/getlikes').then((response) => {
            if (response.data === 0){
              this.likes = 0;
            }
            this.likes = response.data;
          })
        },
        checkIfLiked(){
          axios.get('/likes/'+ this.post.id +'/checkliked').then((response) => {
            if (response.data === 1){
              this.liked = true;
            }
          })
        },
        likeApost(){
            axios.post('/likes/'+ this.post.id +'/likeapost').then((response) => {
              console.info(response.data);
              this.likes += 1;
              this.liked = true;
            })
        },
        unLikeApost(){
            axios.post('/likes/'+ this.post.id +'/unlikeapost').then((response) => {
              console.info(response.data);
              this.likes -= 1;
              this.liked = false;
            })
        },
        countComments(){
          axios.get('/post/'+ this.post.id +'/countcomments').then((response) => {
            this.comments = response.data;
          })
        }
      },
      mounted() {
        // determine author
        axios.get('/post/' +this.post.id+'/getposter').then((response) => {
          let auth_user = window.Laravel.user.id;
          let author = response.data;
          if (auth_user === author){
            this.author = true;
          }
        });

        this.getLikes();

        this.checkIfLiked();

        this.countComments();
      }
    }
</script>