title: Eventbus in Vue.js isn't updating my component
body: <p>I have two components and I want to display what the user enters in one on the other component. I don't really want to use a state manager like vuex because it's probably a bit overkill as it's a small application </p>
  
  <p>this is my main.js: </p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import VueRouter from 'vue-router';
  import { routes }from './routes';
  
  export const EventBus = new Vue();
  
  Vue.use(VueRouter);
  
  const router = new VueRouter({
    routes,
    mode: 'history'
  });
  
  new Vue({
    el: '#app',
    router,
    render: h =&gt; h(App)
  })
  </code></pre>
  
  <p>Component that emits the event called addHtml.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Add HTML&lt;/h1&gt;
          &lt;hr&gt;
          &lt;button @click="navigateToHome" class="btn btn-primary"&gt;Go to Library&lt;/button&gt;
          &lt;hr&gt;
          Title &lt;input type="text" v-model="title"&gt;
          &lt;button @click="emitGlobalClickEvent()"&gt;Press me&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
    import { EventBus } from '../../main.js'
  
    export default {
      data: function () {
        return {
          title: ''
        }
      },
      methods: {
        navigateToHome() {
          this.$router.push('/');
        },
        emitGlobalClickEvent() {
          console.log(this.title);
          EventBus.$emit('titleChanged', this.title);
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>the file that listens for the event thats emitted and to display what was entered on the other component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Existing Items&lt;/h1&gt;
          &lt;hr&gt;
          &lt;p&gt;{{ test }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import { EventBus } from '../main.js';
  
      export default {
        data: function () {
          return {
            test: ''
          }
        },
        created() {
          EventBus.$on('titleChanged', (data) =&gt; {
            console.log('in here!',data);
            this.test = data;
          });
        }
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>the <code>console.log('in here!',data);</code> inside the listener gets printed out to the console so I know it's picking it up however <code>{{ test }}</code> doesn't get updated to what the user enters when I click back onto the component to view if it was updated, it just remains blank? Any Ideas?</p>