Как правильно передавать и принимать пользовательские события во вложенных компонентах?

Question

Алексей Скляров @0example

Vue.js

Как правильно передавать и принимать пользовательские события во вложенных компонентах?

У меня есть 2 компонента: Comments.vue и Comment.vue. В Comments.vue я получаю по апи все комментарии и вывожу их в цикле:

<div class="post__review" v-for="comment in comments" :key="comment.id">
                        <comment :comment="comment"></comment>
                    </div>

В самом Comment.vue я использую такой же компонент внутри:

<template>
    <div  v-if="comment"> 
        <div class="review" :id="`comment-${comment.id}`" :class="{review_hover : hover}">
            <!-- Other Code -->
            <!-- Comment Replies -->
            <div class="review-replies" v-if="comment && comment.replies" v-show="expandReplies && comment.replies.length > 0">
                <div class="review-replies__line"  @click="expandReplies = !expandReplies"></div>
                <div class="review-replies__item" v-for="reply in comment.replies" :key="reply.id">                   
                    <comment :comment="reply" :type="'reply'" :reply_to="comment.user.name"></comment>
                </div>
            </div>
            <!-- /Comment Replies -->
        </div>
    </div>
</template>

В компоненте Comment.vue в mounted методе есть вызов события:

mounted() {
        if (this.isCommentUserRepresentative()) {
            this.$emit('findRepresentativeAnswer',true);
        }
    },

Условие выполняется (проверяется просто свойство компонента), но отловить его у меня не выходит. Я хочу чтобы, если сработало событие, выполнилась функция, которая изменит свойство всех родительских комментариев.
Добавляю во все тот же Comment.vue

<template>
    <div  v-if="comment"> 
        <div class="review" :id="`comment-${comment.id}`" :class="{review_hover : hover}" @findRepresentativeAnswer="commentHaveRepresentativeAnswer">
            <!-- Other Code -->
            <!-- Comment Replies -->
            <div class="review-replies" v-if="comment && comment.replies" v-show="expandReplies && comment.replies.length > 0">
                <div class="review-replies__line"  @click="expandReplies = !expandReplies"></div>
                <div class="review-replies__item" v-for="reply in comment.replies" :key="reply.id">                   
                    <comment :comment="reply" :type="'reply'" :reply_to="comment.user.name"></comment>
                </div>
            </div>
            <!-- /Comment Replies -->
        </div>
    </div>
</template>

Но функция commentHaveRepresentativeAnswer не выполняется. Как правильно запускать и отлавливать событие, по сути в одном и том же компоненте Comments.vue?