How to make recursive calling of subitems in vuejs2?

Hello,
In my laravel/blade app when I need to show comments of a product with parent_id I wrote a function with recursive calling of itself, like

public function showCommentItem( $commentsList, $parent_id, $product_id, $deeps, $backend_home_url, $images_dir, $current_template )
{
    $ret_html= '';
    $ret_html.= '<ul class="p-b-30">';
    foreach( $commentsList as $nextComment ) { // run list of comments
        if ( (int)$nextComment->parent_product_comment_id == (int)$parent_id ) {
            $approved_status_html= '';
            $ban_user_html= '';
            $rating_html= '';
            $status_html= '<span class="'.($nextComment->approved_status=='N'?'text-danger':'').'">'.$viewFuncs->getProductCommentApprovedStatusLabel( $nextComment->approved_status ).'</span>';
            $current_status_html= '.&nbsp;<span class="_tree_current_status ">Current Status</span>&nbsp;<b>'. $status_html . '</b>.&nbsp;';
            if ( $nextComment->approved_status == "N" or $nextComment->approved_status == "A" ) { // .text-center
               ...
            }

               ...
        

        $ret_html.= '<li class="'.($nextComment->subitems_count > 0 ? ' isFolder isExpanded ' : '').' p-b-10" >'.
            '<small>'./*$nextComment->user_id .'  '.$nextComment->user_active_status .'  : '.*/$nextComment->username.$ban_user_html.'</small>'./*'<br>' . */
            '<small>'.$current_status_html . $approved_status_html .
            '<span class="time pull-right">'.$nextComment->created_at.''.$rating_html.'</span>'.'</small>' . '<br>' ;
           ...
        if ( $nextComment->subitems_count > 0 ) {
            $deeps++;
            $ret_html.= $this->showCommentItem( $commentsList, $nextComment->id, $product_id, $deeps, $backend_home_url, $images_dir, $current_template);
        }
        $ret_html.= '</li>';
    } //                 if ( $nextComment->parent_product_comment_id == $parent_id ) {

} //             recursiveforeach( $commentsList as $nextComment ) { // run list of comments
$ret_html.= '</ul>';

return $ret_html;

whrere $commentsList - my comments, $parent_id - is 0 at root calling, $product_id - common for all comments
and I got string for all comments with all functionality.

I try to make similar in bootstrap-vue project, like :

    <b-list-group>
          // I got root items only with getAdCommentsByParentId method 
        <b-list-group-item v-for="(nextAdComment) in getAdCommentsByParentId(0)" :key="nextAdComment.id" class="m-1 p-0">

            <div class="pre-formatted" v-html="nextAdComment.id+' ( '+nextAdComment.parent_ad_comment_id+') : '+concatStr(nextAdComment.text,50)"></div>
        </b-list-group-item>

    </b-list-group>

      methods: {
        getAdCommentsByParentId: function (parent_ad_comment_id) {

            var retArray= []
            if(!this.adComments) return []
            this.adComments.map((nextAdComment) => {
                if (nextAdComment.parent_ad_comment_id == parent_ad_comment_id) {
                    retArray[retArray.length]= nextAdComment
                }
            })
            return retArray
        },

But I do not know how to make recursive calling like I did with blade?

"bootstrap-vue": "^2.3.0",
"vue": "^2.6.11",

Thanks!