How can i listen for an event from a sub component in vue?

Question

I have 3 components

• Stage
• StageComponent
• StageElementComponent

the Stage contains the default data and the basic control of all 3 components.

the StageComponent i filter the StageElementComponent elements, and have some design, validations and user interactions in it.

the StageElementComponent display and element based on the user choise.

Things to take in account

I want to know if it is possible to emit an event from StageElementComponent and listen to it in the Stage component? like

<template>
    //StageElementComponent
    <div class="element d-flex flex-column justify-content-center"
        @dblclick="clear">
        <i class="material-icons" v-if="element" :class="[`bg-${element.type.color}`]">{{ element.type.icon }}</i>
    </div>
</template>
<script>
    export default {
        props : {
            element : {
                type : Object,
                required : true
            }
        },
        methods : {
            clear : function($event) {
                this.$emit('clear', {
                    index : this.element.index
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .element {
        cursor: pointer;
    }
</style>

and in the Stage component listen to it like

<v-stage id="ticktr" class="section center" 
    :rows="height" 
    :columns="width" 
    :elements="elements"
    @clear="clearElement"></v-stage>

I do need these 3 components.

I don't want to listen and emit in the StageComponent as i would be repeating myself

I don't want to use $root.$emit.

It is possible to do this? how?