How to store and access data on eventBus in VueJS

Basically I want to be able to access some centralized data by setting up a dataBus as a vue instance object, and then access and tweak this data from different components.

I cant seems to access by data from my componenets, even basic string interpolation is not getting rendered to the DOM.

  export const dataBus = new Vue({
    data: {
      numQuotes: 4,
      stringVar: 'Hellow There'
    }
  });

I also tried setting up my data as the return of the function data(). But being as my data bus is an actual vue instance I don't think this is correct. (I could be wrong). Following is the component in which I import my dataBus and try to output my data.

  <template>
    <div>
      <h1>Quotes Added</h1>
      <div id="trackerBar">
        <div id="trackerBarActual">
            <h2>{{numQuotes}}/10</h2>
        </div>
      </div>
    </div>

  </template>

  <script>
    import { dataBus } from '../main.js';

    export default{

    }
  </script>

I am getting the following error: Property or method "numQuotes" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Am I missing something obvious? Is it even possible to access data this way? Or do I have to access it as a method?