Why is the input parameter of a nested recursive component undefined?

Question

Vue.js

Implementing a nested comment system. There is a problem with a nested component comments. There are two components in total:

Comments.vue

<template>
    <div>
        <div class="post__loading" v-if="loading">
            <img src="/assets/images/svg/loading.svg" alt="Загрузка...">
        </div>
        <div v-if="!loading">
            <div class="post__review" v-for="comment in comments" :key="comment.id">
                <comment :comment="comment" />
            </div>          
        </div>

    </div>
</template>

<script>
import Comment from './components/Comment.vue';

export default {
    components: {
        'comment' : Comment,
    },
    data() {
        return {
            comments: [],
            loading:true,
        }
    },
    props: ['post_id'],
    created() {
    },
    mounted(){
    }
}
</script>

comment.vue

<template>
    <div>        
        <div class="review" :data-id="comment.id" v-if="comment">
            <pre>{{comment}}</pre> 

        <div class="review-replies"  v-if="comment.replies.length">
            Ответы начались
            <div v-for="reply in comment.replies" :key="reply.id">               
                <comment :comment="reply"/>
            </div>
            Ответы кончились
        </div>
    </div>
</template>

<script>
export default {
    name: 'comment',
    data() {
        return {
            user: window.Laravel.user,
            showReplyForm: false,
            reply: null,
        }
    },
    props: {
        comment: Object
    },
    mounted() {

    },
    methods: {
        sendReply() {
        },
        vote(value) {

        }
    },
    filters: {
        toRating(value) {
        }
    }
}
</script>

The Comment.vuefirst comment is rendered correctly, but in the block:

<div class="review-replies"  v-if="comment.replies.length">
            Ответы начались
            <div v-for="reply in comment.replies" :key="reply.id">               
                <comment :comment="reply"/>
            </div>
            Ответы кончились
        </div>

<comment :comment="reply"/>is not rendered, it is indicated that the reply, which is being <comment>processed in this, is undefined. At the same time, the reply itself exists and is an object, since when

<div v-for="reply in comment.replies" :key="reply.id">               
                {{reply}}
                <comment :comment="reply"/>
            </div>

{{reply}}output. What could be the problem?

Answer 1

so why try to render the comment component in the comment component. I don't think it works like that.
I would offhand make a reply component and pass :reply="reply" to it, iterating in the comment component.