title: Dynamic component event bus not work in vue?
body: <p>I just used event bus in vuejs for the dynamic component, but when I emit an event from one component, I cannot listen to that event in another component. Below is the demo I created by codesandbox, what I want to do is output 'test in tes2' from test2component, but it outputs nothing. But when I uncomment the $bus listener in HomeCompnent, the two console.log are all executed.</p>
  
  <h2>main.js</h2>
  
  <pre><code>Vue.propotype.$bus = new Vue();
  </code></pre>
  
  <h2>HomeComponent</h2>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;component :is="currentComponent" @changeComponent="changeComponent"&gt;&lt;/component&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Test1Component from "./Test1Component";
  import Test2Component from "./Test2Component";
  
  export default {
    created() {
      // this.$bus.$on("test", () =&gt; console.log("event bus test"));
    },
    components: {
      Test1Component,
      Test2Component
    },
    data() {
      return {
        currentComponent: "Test1Component"
      };
    },
    methods: {
      changeComponent() {
        this.currentComponent = "Test2Component";
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <h2>Test1Component</h2>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;test1&lt;/h1&gt;
      &lt;button @click="changeComponent"&gt;click me&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    methods: {
      changeComponent() {
        this.$emit("changeComponent");
        this.$bus.$emit("test");
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <h2>Test2Component</h2>
  
  <pre><code>&lt;template&gt;
    &lt;h1&gt;test2&lt;/h1&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    created() {
      this.$bus.$on("test", () =&gt; console.log("test in test2"));
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/90ky2pwy" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit Vue Template"></a></p>