Laravel5 コメントの表示

ブログのポスト１件に対して複数のユーザがコメントができ、そのコメントに対しても返信ができるyoutube形式のコメントシステムをlaravel5.8とvue.jsを使って実装しています。

commentのmodel作成とデータのseedが完了し、テーブルにはすでにコメントのデータが入っています。

現在、show.blade.phpに最初のコメントを表示させたいのですが、次のエラーが出ていて解決策が見つかりません。

具体的には51件目のポストhttp://127.0.0.1:8000/results/51のURLにコメント機能をつけたいと考えています。

Property or method "comment" is not defined on the instance but referenced during render

Cannot read property 'user' of undefined"

助けていただけると嬉しいです。
よろしくお願いします。
ResultsController.php

public
1    {
2        $recommended_posts = Post::latest()
3                            ->whereDate('date','>',date('Y-m-d'))
4                            ->where('category_id','=',$post->category_id)
5                            ->where('id','!=',$post->id)
6                            ->limit(7)
7                            ->get();
8
9        $posts['particular_post'] = $post;
10        $posts['recommended_posts'] = $recommended_posts;
11        
12        
13        //return $post->comments()->paginate(5); このコードを入れると、
14　　　　　　５件分のobjectが表示されます
15
16        return view('posts.show',compact('posts'));
17    }
18

web.php

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

show.blade.php

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

comments.vue

<template>
 <div class="reply-comment" :v-for="comment in comments">
                     <div class="user-comment" >
                        <div class="user">
                            <!--<img src="" alt="" >-->
                            <avatar :username="comment.user.name" :size="30" ></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>
</template>

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

comment.php