How to correctly send and receive custom events in nested components?

Question

Vue.js

I have 2 components: Comments.vue and Comment.vue. In Comments.vue I get all the comments via api and display them in a loop:

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

In Comment.vue itself, I use the same component inside:

<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>

In the Comment.vue component, in the mounted method, there is an event call:

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

The condition is met (just the property of the component is checked), but I can't catch it. I want that if an event is fired, a function will be executed that will change the property of all parent comments.
I add to the same 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>

But the commentHaveRepresentativeAnswer function is not executed. How to correctly fire and catch an event, in fact, in the same Comments.vue component?

Answer 1

The event handler is attached to some weird div instead of the component instance. No wonder it doesn't get called.