title: ""TypeError: Cannot read property '$emit' of undefined vue
body: <p>I want to emit event from "home" component to "about" component. But it throws this exception-"TypeError: Cannot read property '$emit' of undefined".</p>
  
  <p>This is my "main.js"</p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from "vue";
  import App from "./App.vue";
  import router from "./router";
  
  export const bus = new Vue();
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    render: h =&gt; h(App)
  }).$mount("#app");
  </code></pre>
  
  <p>This is my "Home" component.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="home"&gt;
      &lt;input
        v-model="text"
        class="text-input"
        placeholder="Add text to your child component"
      /&gt;
      &lt;button @click="sendmsg" class="btn-add"&gt;Add message&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { bus } from "../main";
  
  export default {
    name: "home",
    data() {
      return {
        text: "",
      };
    },
    methods: {
      sendmsg() {
        bus.$emit("msg", this.text);
        this.text = "";
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>And this "About" component</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="about"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { bus } from "../main";
  export default {
    name: "about",
    created() {
      bus.$on("message", (data) =&gt; {
        console.log(data);
      });
    }
  };
  &lt;/script&gt;
  </code></pre>