У вашего component-parentшаблона есть одна проблема, так как он пытается отобразить несколько дочерних компонентов. Vue обычно требует одного корневого элемента div внутри компонентов, поэтому вам нужно обернуть его в тег div или другой тег.

<div>
    <component-child  v-for="q in items"></component-child>
</div>

Второе, на что следует обратить внимание, это то, что вы генерируете событие от дочернего компонента, который находится на 2 уровня ниже, и вы слушаете его в корне.

Root //but you listen to the event up here 1 level above
 Component 1 //you should listen to the event here
  Component 2 //your try to emit it from here

У вас есть 2 варианта здесь. Либо излучайте, component-childслушайте это, даже component-parentпотом распространяйте это даже вверх. Скрипка https://jsfiddle.net/bjqwh74t/29/

Второй вариант - зарегистрировать глобальный так называемый busпустой экземпляр vue, который вы можете использовать в тех случаях, когда вы хотите установить связь между компонентами, не являющимися дочерними. Скрипка https://jsfiddle.net/bjqwh74t/30/

Обычно между родительским и дочерним компонентами вы используете события напрямую, передавая из дочернего и слушая в родительском v-on:event-name="handler"компоненте, но в тех случаях, когда у вас больше уровней между компонентами, вы используете второй подход.

Ссылка на документ для первого случая: https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

Ссылка на документ для второго случая: https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

PS: предпочитайте использовать кебаб-кейс для названий событий, что означает, что вы пишете -вместо заглавных букв. Написание заглавными буквами может привести к странным ситуациям, когда ваше событие не попадает в корень.

Уже немного поздно, но вот как я это сделал:

Компонент-ребенок:

this.$root.$emit('foobar',{...});

Компонент-родитель:

this.$root.$on('foobar')

В вашем дочернем компоненте просто используйте $emitдля отправки события $rootследующим образом:

v-on:click="$root.$emit('hamburger-click')"

Затем в родительском компоненте (например, «Приложение») настройте прослушиватель в mountedхуке жизненного цикла Vue следующим образом:

  export default {
    <snip...>
    mounted: function() {
      this.$root.$on('hamburger-click', function() {
        console.log(`Hamburger clicked!`);
      });
    }
  }

Для чего это стоит, вы можете использовать API событий браузера. Он требует немного больше сценариев, чем встроенный материал Vue, но он также помогает решить эти проблемы (и примерно столько же кода, сколько при создании "шины", как в принятом ответе).

На дочернем компоненте:

this.$el.dispatchEvent(new CustomEvent('itemSelected', { detail: { 'priority' : pty }, bubbles: true, composed: true });

На родительском компоненте, в mountedчасти жизненного цикла:

mounted() {
    this.$el.addListener('itemSelected', e => console.log('itemSelectedListener', e.detail));
}