Vue listen and handle from Emits from elements inside slots - vue.js

Question

Basically I have Parent, child, child-of-child component while child component have 2 named slots and child-of-child component have 1 slot so template ends up like this:
Structure of the components
<parent>
<child>
<child-of-child></child-of-child>
</child>
</parent>
Parent tempalte:
<template>
<div>
<labeled-menu>
<label slot="label">
Open Menu
</label>
<ul slot="menu">
<li v-for="i in [1,2,3,4,5,6,7]" #click="$emit('test', `${i} li is clicked`)">List {{i}}</li>
</ul>
</labeled-menu>
</div>
</template>
Child Template with 2 named slots while the 'menu' slot is passed as slot of the child-of-child component:
<template>
<div>
<div #click="show">
<slot name="label">
</slot>
</div>
<v-dialog :class="getMenuSize" :is-active="isActive" #hide="hide" :position="position">
<slot name="menu">
</slot>
</v-dialog>
</div>
</template>
child-of-child component
<template>
<div>
<div class="dialog-container">
<div class="dialog-header">
</div>
<div class="dialog-body">
<slot>
//here the ul and lis are basically displayed
</slot>
</div>
</div>
</div>
</template>

Answer 1

I didn't get your problem but if you want a global emitter handler a common pattern is to create a singleton of a vue instance and import it when you need it.
src/bus/index.js
import Vue from 'vue'
const bus = new Vue()
export default bus
src/components/Whatever.vue
import bus from 'src/bus'
// And then in your functions
bus.$on(...)
bus.$emit(...)
bus.$off(...)
If you're looking for a more structured event system, you should take a look at the store pattern with vuex.