I'm trying to display my child comments in VueJs its giving me a small error - laravel

Question

Hi i am i just started VueJs and i am having difficulties at the same time.
I'm working on a Laravel + VueJs project and I'm in the blogging and commenting system.
On this I created a comments table in which I have the "respond_to_id" attribute which will store the "id" of the parent comments.
Then at VueJs level I retrieve these parent and child comments.
But the problem is with the VueJs display. As I answer only to a child comment this last one this last comment does not display below this child comment.
Here is my Vue.Js code for retrieving child comments.
<div
v-for="(commentaire, i) in commentaires"
:key="i"
v-if="commentaires.length"
>
<div id="comment-1" class="comment">
<div class="d-flex">
<div class="comment-img">
<img v-bind:src="commentaire.photo" alt="" />
</div>
<div>
<h5>
{{ commentaire.name }}
<a #click="repondre(commentaire)" class="reply"
><i class="bi bi-reply-fill"></i> répondre</a
>
</h5>
<time datetime="2020-01-01"
>il y a {{ format(commentaire.created_at) }}</time
>
<p>
{{ commentaire.contenu }}
</p>
</div>
</div>
</div>
<!-- End comment #1 -->
<div
id="comment-reply-1"
class="comment comment-reply"
v-for="child in commentaire.children"
:key="child.id"
v-bind:commentaire="child"
>
<div class="d-flex">
<div class="comment-img">
<img v-bind:src="child.photo" alt="" />
</div>
<div>
<h5>
{{ child.name }}
<a #click="repondre(child)" class="reply"
><i class="bi bi-reply-fill"></i> répondre</a
>
</h5>
<time datetime="2020-01-01">{{
format(child.created_at)
}}</time>
<p>
{{ child.contenu }}
</p>
</div>
</div>
<!-- End comment reply #2-->
</div>
</div>
I wonder where the error lies. Help me please.

Answer 1

enter image description here
The problem is that when I reply to a child comment my comment does not show below the child comment.