title: How to get data in Main.js from App.vue in Vue js?
body: <p>Here is my code in <code>main.js</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './App'
  import VueRouter from 'vue-router'
  import vueResource from 'vue-resource'
  // import {bus } from './bus.js'
  // import MainContent from './components/MainContent'
  
  export const bus = new Vue();
  
  Vue.config.productionTip = true
  
  Vue.use(vueResource)
  Vue.use(VueRouter)
  
  
  const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
      // {path:'/',component: MainContent }
    ]
  
  })
  
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    template: '&lt;App/&gt;',
    components: { App }
  })
  
  
  // const bus = require('./bus.js');
  
  
  
  var newData = new Vue({
  
    el: '#graph-content',
    data: {
      graphD:'',
      title: 'test title'
    },
  
    methods: {
      fetchData: function (data) {
      this.graphD = data;
      console.log('Inside', this.graphD);
      }
    },
    created: function () {
      bus.$on('graphdata', this.fetchData);
    }
  
  
  })
  console.log('OutSide', newData._data.graphD)</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the bus emit data from app.vue</p>
  
  <pre><code>bus.$emit('graphdata', "test bus");
  </code></pre>
  
  <p>Using following code I am trying to get data from app.vue. I am getting data inside the scope of fetchData but I am not getting from outside of newData scope.
  Could anyone suggest me where is the problem or possible solution to pass data/object from <code>app.vue</code> to <code>main.js</code> file.</p>
  
  <p>****Updated *****
  app.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;app-header&gt; &lt;/app-header&gt;
  
  
  
          &lt;app-maincontent&gt;&lt;/app-maincontent&gt;
  
  
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Header from './components/Header.vue'
  import SideNav from './components/SideNav.vue'
  import MainContent from './components/MainContent.vue'
  import GraphA from './components/GraphA.vue'
  import {bus} from './main.js'
  
    var apiURL = 'http://localhost:3000/db';
  export default {
  
    components: {
      'app-header': Header,
      'app-sidenav': SideNav,
      'app-maincontent': MainContent,
      'app-grapha': GraphA
    },
    data () {
      return {
        users:[]
      }
    },
    methods: {
      fetchData: function () {
      var self = this;
      $.get( apiURL, function( data ) {
          self.users = data;
          // console.log(data);
          bus.$emit('graphdata', "test bus");
      });
  
    }
    },
    created: function (){
      this.fetchData();
    }
  }
  
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>