Laravel、Vue JS 和 Inertia JS 中的关系问题

Question

文章有评论，评论有用户，如何使用Laravel、Vue JS、惯性JS在单个文章页面展示用户数据。在我之前的 Laravel 应用程序中，一切都运行良好。我在使用 Inertia JS 和 Vue JS 重建它时遇到问题。

这是 ArticleController 页面

public function show(Article $article) : Response
{
    return Inertia::render('Article/Show', [
        'article'   => $article,
        'comments'  => $article->comments,
    ]);
}

这个关系来自于文章模型

public function comments()
{
    return $this->hasMany(Comment::class);
}

来自评论模型

public function user()
{
    return $this->belongsTo(User::class, 'user_id');
}

来自用户模型

public function comments()
{
    return $this->hasMany(Comment::class);
}

这是来自我的 Show.vue 页面

const props = defineProps([
    'article', 'comments'
])

<div v-for="comment in comments" :key="comment.id">
    <div v-else :text="comment.user.name"></div>
</div>