title: VueJS Grandchild component call function in Great grandparent component
body: <p>Suppose I have a child component that want to send a message to a great grandparent, the code will be like this, correct me if I'm wrong:</p>
  <pre><code>Vue.component('child', {
    template: `&lt;div v-on:click=&quot;clicked&quot;&gt;Click me&lt;/div&gt;`,
    methods: {
      clicked: function () {
          this.$emit('clicked', &quot;hello&quot;)
      },
    },
  });
  
  Vue.component('parent', {
    template: `&lt;child v-on:clicked=&quot;clicked&quot;&gt;&lt;/child&gt;`,
    methods: {
      clicked: function (msg) {
          this.$emit('clicked', msg)
      },
    },
  });
  
  
  Vue.component('grandparent', {
    template: `&lt;parent v-on:clicked=&quot;clicked&quot;&gt;&lt;/parent&gt;`,
    methods: {
      clicked: function (msg) {
          this.$emit('clicked', msg)
      },
    },
  });
  
  Vue.component('greatgrandparent', {
    template: `&lt;grandparent v-on:clicked=&quot;clicked&quot;&gt;&lt;/grandparent&gt;`,
    methods: {
      clicked: function (msg) {
          console.log('message from great grandchild: ' + msg);
      },
    },
  });
  </code></pre>
  <p>Is there a possibility to directly intercept the message from the child and call the clicked function in the great-grandparent <strong>without the need to set up the passing callback at every parent?</strong></p>
  <p>I know I can use a custom databus, <a href="https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication</a>, but since my components have parent-child relationship already, shouldn't I be able to notify the grandparent in a simpler way?</p>