моя модель не извлекает пользователя объекта после выполнения защищенного $ with = ["user"]?

Question

Я хочу получить комментарии, но есть проблема, что пользователь имеет значение Null, как я показываю на следующих изображениях. Я хочу, чтобы моя модель извлекала объект пользователя, выполнив

protected $ with = ["user"]

но это не введите описание изображения здесь

введите описание изображения здесь

мой код

комментарий Модель

<?php
&#x200B;
namespace App;
&#x200B;
class Comment extends Model
{
&#x200B;
protected $with = \["user" , 'votes'\];
protected $appends = \['repliesCount'\];
&#x200B;
public function news()
{
return $this->belongsTo('App\\News');
}
&#x200B;
public function getRepliesCountAttribute()
{
return $this->replies->count();
}
&#x200B;
public function votes()
{
return $this->morphMany('App\\Vote', 'voteable');
}
&#x200B;
public function user()
{
return $this->belongsTo('App\\User');
}
&#x200B;
public function replies()
{
return $this->hasMany('App\\Comment', 'comment\_id')->whereNotNull('comment\_id');
}
}

мой код в vue js

<template>
<div class="media my-3">
<avatar :username="[comment.user.name](https://comment.user.name)" class='mr-3' :size="30"></avatar>
&#x200B;
<div class="media-body">
<h6 class="mt-0">
{{ [comment.user.name](https://comment.user.name) }}
</h6>
<small>
{{ comment.body }}
</small>
<div class="d-flex">
<votes :default\_votes="comment.votes" :entity\_id="[comment.id](https://comment.id)" :entity\_owner="[comment.user.id](https://comment.user.id)"></votes>
<button u/click="addingReply = !addingReply" class="btn btn-sm ml-2" :class="{ 'btn-default': !addingReply, 'btn-danger': addingReply }">
{{ addingReply ? 'Cancel' : 'Add Reply' }}
</button>
</div>
&#x200B;
<div v-if="addingReply" class="form-inline my-4 w-full">
<input v-model='body' type="text" class="form-control form-control-sm w-80">
<button u/click="addReply" class="btn btn-sm btn-primary">
<small>Add reply</small>
</button>
</div>
<replies ref='replies' :comment="comment"></replies>
</div>
</div>
</template>
&#x200B;
&#x200B;
<script>
import Avatar from 'vue-avatar'
import Replies from './replies.vue'
&#x200B;
export default {
components: {
Avatar,
Replies
},
data() {
return {
body: '',
addingReply: false
}
},
props: {
comment: {
required: true,
default: () => ({})
},
video: {
required: true,
default: () => ({})
}
},
methods: {
addReply() {
if (! this.body) return
&#x200B;
[axios.post](https://axios.post)(\\/comments/${this.video.id}\, {
comment\_id: [this.comment.id](https://this.comment.id),
body: this.body
}).then(({ data }) => {
this.body = ''
this.addingReply = false
this.$refs.replies.addReply(data)
})
}
}
}
</script>

Я следую шагу из этого проекта [https://github.com/bahdcoder/build-a-youtube-clone-in-laravel-and-vuejs] любая идея, чтобы восстановить пользовательский объект после создания комментария?