Laravel, Vue.js, система комментирования, нумерация страниц

Question

Я строю систему комментирования блогов, используя laravel 5.8 и vue.js. Я хочу добавить функцию paginate к комментариям.

Теперь я могу отобразить пять комментариев, а после нажатия кнопки «загрузить больше»

Я хочу показать следующие пять комментариев.

Понятия не имею, как этого добиться. Я рад, если кто-то мне поможет.

comments.vue

<template >
<div class="commentarea">
        <div class="comment-posts" >
            <div class="user-comment-area" >
                <div class="user-post">
                    <img src="" alt="" >user
                    <input type="text">
                </div>
                <div class="comments-buttons">
                    <button class="cancel-button">Cancel</button>
                    <button class="comment-button">Comment</button>
                </div>
            </div>
            <div class="reply-comment" v-if="comment.user" v-for="comment in comments" :key="comment.id" :post="comment">
                 <div class="user-comment" >
                    <div class="user">
                        <!--<img src="" alt="" >-->
                        <avatar :username="comment.user.name" :size="50" ></avatar>
                    </div>
                    <div class="user-name">
                        <span class="comment-name">{{ comment.user.name }}</span>
                        <p> {{ comment.body }} </p>
                    </div>
                </div>
                <div class="reply">
                    <div class="seemorecomments">
                        <a href="">see more</a>
                    </div>
                    <button class="reply-button">
                        <i class="fas fa-reply"></i>
                    </button>
                </div>
            </div>
        </div>
        <div>
            <button @click="fetchComments" class="load">Load More</button>
        </div>
    </div>

<script>
import Avatar from 'vue-avatar'
export default {
    props: ['post'],
    components: {
        Avatar
    },
    mounted() {
        this.fetchComments()
    },
    data: () => ({
        comments: {
            data: []
        }
    }),
       methods: {
    fetchComments() {
        axios.get(`/results/${this.post.id}/comments`).then((response) => {
            this.comments = response.data.data
        })
    }
}
}
</script>

commentsController.php

public function index(Post $post)
{
    return $post->comments()->with('user')->paginate(5);
}

ResultsController. php

public function show(Post $post)
{
    $recommended_posts = Post::latest()
                        ->whereDate('date','>',date('Y-m-d'))
                        ->where('category_id','=',$post->category_id)
                        ->where('id','!=',$post->id)
                        ->limit(7)
                        ->get();

    // load the post comments here
    $post->load('comments');
    $posts['particular_post'] = $post;
    $posts['recommended_posts'] = $recommended_posts;

    return view('posts.show',compact('posts'));
}

show.blade.php

<comments-component :post="{{ $posts['particular_post'] }}"></comments-component>

web.php

Route::get('results/{post}', 'ResultsController@show')->name('posts.show');
Route::get('results/{post}/comments', 'CommentsController@index');