Vue 2 Импортированное свойство компонента или метод не определены

Question

Я пытаюсь вложить некоторые компоненты - в конечном итоге я хотел бы иметь компонент, который отображает сообщения, с компонентом PostItem, используемым для отображения каждого сообщения.Внутри PostItem я хочу получить список связанных комментариев с CommentItem для отображения каждого комментария.У меня есть сообщения, отображаемые с использованием PostItem без ошибок, но как только я добавляю комментарии, я получаю ошибки.Итак, чтобы упростить, я вытащил компонент CommentsList и просто пытаюсь отобразить его на странице, загружая вручную все комментарии - это точная копия PostsList, за исключением комментария, заменяющего post, но он генерирует ошибку:

[Vue warn]: Property or method "commment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Comment> at resources/assets/js/components/CommentItem.vue
       <CommentsList> at resources/assets/js/components/CommentsList.vue
        <Root>

CommentsList.vue

<template>
      <div class="media-list media-list-divided bg-lighter">
        <comment v-for="comment in comments"
                     :key="comment.id"
                     :comment="comment">
        </comment>
      </div>
</template>

<script>
    import comment from './CommentItem'
    export default {
        components: { comment },
        data: function() {
            return {
                comment: {
                        id: 1,
                        content: "",
                        edited: false,
                        created_at: new Date().toLocaleString(),
                        user: {
                            id: 1,
                            name: '',
                        }
                    },
                comments: [
                    {
                        id: 1,
                        content: "",
                        edited: false,
                        created_at: new Date().toLocaleString(),
                        user: {
                            id: 1,
                            name: '',
                        }
                    }
                ]
          };
        },
        created() {
            this.fetchCommentsList();
        },

        methods: {
            fetchCommentsList() {
                axios.get('/api/comments').then((res) => {
                    //alert(JSON.stringify(res.data[0], null, 4));
                    this.comments = res.data;
                });
            },

            createComment() {
                axios.post('api/comments', {content: this.comment.content, user_id: Laravel.userId, vessel_id: Laravel.vesselId })
                    .then((res) => {
                        this.comment.content = '';
                        // this.comment.user_id = Laravel.userId;
                        // this.task.statuscolor = '#ff0000';
                        this.edit = false;
                        this.fetchCommentsList();
                    })
                    .catch((err) => console.error(err));
            },

            deleteComment(id) {
                axios.delete('api/comments' + id)
                    .then((res) => {
                        this.fetchCommentsList()
                    })
                    .catch((err) => console.error(err));
            },
        }
    }
</script>

CommentItem.vue

<template>
    <div>
        <a class="avatar" href="#">
            <img class="avatar avatar-lg" v-bind:src="'/images/user' + comment.user.id + '-160x160.jpg'" alt="...">
        </a>
        <div class="media-body">
            <p>
                <a href="#"><strong>{{ commment.user.name }}</strong></a>

            </p>
            <p>{{ comment.content }}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'comment',
        props: {
            comment: {
                required: true,
                type: Object,
                default: {
                  content: "",
                  id: 1,
                  user: {
                    name: "",
                    id: 1
                  }
                }
            }
        },
        data: function() {
            return {
          }
        }
    }
</script>

Я довольно новичок в Vue - я прочитал так много уроков икопался в документации и не могу понять, почему он работает для меня с моим компонентом PostsList, который является точной копией.Также кажется странным, что мне нужны как комментарии, так и комментарии при возврате данных - то, чего требует моя рабочая версия Posts.

Я добавлю свои рабочие компоненты Posts:

PostsList.vue

<template>
    <div>
        <div v-if='posts.length === 0' class="header">There are no posts yet!</div>
            <post v-for="post in posts"
                     :key="post.id"
                     :post="post">
            </post>

            <form action="#" @submit.prevent="createPost()" class="publisher bt-1 border-fade bg-white">
                <div class="input-group">
                    <input v-model="post.content" type="text" name="content" class="form-control publisher-input" autofocus>
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-primary">New Post</button>
                    </span>
                </div>
                <span class="publisher-btn file-group">
                  <i class="fa fa-camera file-browser"></i>
                  <input type="file">
                </span>
            </form>

    </div>
</template>
<script>
    // import CommentsManager from './CommentsManager.vue';
    import post from './PostItem.vue';
    export default {
        components: {
            post
        },
        data: function() {
            return {
                post: {
                        id: 1,
                        content: "",
                        edited: false,
                        created_at: new Date().toLocaleString(),
                        user: {
                            id: 1,
                            name: '',
                        }
                    },
                posts: [
                    {
                        id: 1,
                        content: "",
                        edited: false,
                        created_at: new Date().toLocaleString(),
                        user: {
                            id: 1,
                            name: '',
                        }
                    }
                ]
            };
        },        
        created() {
            this.fetchPostsList();
        },

        methods: {
            fetchPostsList() {
                axios.get('/api/posts').then((res) => {
                    //alert(JSON.stringify(res.data[0], null, 4));
                    this.posts = res.data;
                });
            },

            createPost() {
                axios.post('api/posts', {content: this.post.content, user_id: Laravel.userId, vessel_id: Laravel.vesselId })
                    .then((res) => {
                        this.post.content = '';
                        // this.post.user_id = Laravel.userId;
                        // this.task.statuscolor = '#ff0000';
                        this.edit = false;
                        this.fetchPostsList();
                    })
                    .catch((err) => console.error(err));
            },

            deletePost(id) {
                axios.delete('api/posts' + id)
                    .then((res) => {
                        this.fetchPostsList()
                    })
                    .catch((err) => console.error(err));
            },
        }
    }
</script>

PostItem.vue

<template>
  <div class="box">
    <div class="media bb-1 border-fade">
      <img class="avatar avatar-lg" v-bind:src="'/images/user' + post.user.id + '-160x160.jpg'" alt="...">
      <div class="media-body">
        <p>
          <strong>{{ post.user.name }}</strong>
          <time class="float-right text-lighter" datetime="2017">24 min ago</time>
        </p>
        <p><small>Designer</small></p>
      </div>
    </div>

    <div class="box-body bb-1 border-fade">
      <p class="lead">{{ post.content }}</p>

      <div class="gap-items-4 mt-10">
        <a class="text-lighter hover-light" href="#">
          <i class="fa fa-thumbs-up mr-1"></i> 0
        </a>
        <a class="text-lighter hover-light" href="#">
          <i class="fa fa-comment mr-1"></i> 0
        </a>
      </div>
    </div>

  </div>
</template>
<script>
    export default {
      name: 'post',
       props: {
            post: {
                required: true,
                type: Object,
                default: {
                  content: "",
                  id: 1,
                  user: {
                    name: "",
                    id: 1
                  }
                }
            }
        },
        data: function() {
            return {
        }
    }
  }
</script>