title: Event_Bus vue variable access to single file component Vue.js - Laravel Mix
body: <p>I just want to ask on how to access a variable to the single file component of vue? 
  When i try to access my app on the browser the vue js will result an error.</p>
  
  <blockquote>
    <p>Error in mounted hook: "ReferenceError: EventBus is not defined"</p>
  </blockquote>
  
  <p>My code below.</p>
  
  <p>I implement this on the app.js</p>
  
  <pre><code>window.Vue = require('vue');
  var EventBus = new Vue();
  
      Vue.component('transactionslist', require('./components/TransactionList.vue'));
  
      const app = new Vue({
          el: '#transaction',
          methods: {
              getTransactions: function () {
                  $.getJSON("/guard/station/transactions?search=" + this.Search, function (_transactions) {
                      this.Transactions = JSON.parse(JSON.stringify(_transactions));
                  }.bind(this));
              }
          },
          data() {
              return {
                  Search: '',
                  Transactions: [],
              }
          },
          mounted: function () {
              this.getTransactions();
  
          }
      });
  </code></pre>
  
  <p>and this is my vue component (TransactionList.vue)</p>
  
  <pre><code>&lt;template&gt;
      &lt;table class="table table-hover transaction-list"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th class="fit"&gt;Transfer Code&lt;/th&gt;
                  &lt;th&gt;Orgin&lt;/th&gt;
                  &lt;th&gt;Destination&lt;/th&gt;
                  &lt;th class="fit"&gt;Date Created&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;transactionRow @rowSelected="isSelectedRow" v-for="trans in data" :origin="trans.Origin" :destination="trans.Destination"
                  :date="trans.created_at" :key="trans.TransferCode" :tscode="trans.TransferCode"&gt;
              &lt;/transactionRow&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['data'],
          created() {
              this.transactions = this.$children;
          },
          data() {
              return {
                  transactions: [],
                  Transaction: []
              }
          },
          methods: {
              isSelectedRow: function (payload) {
                  EventBus.$emit('showSelected', payload);
                  this.transactions.forEach(transaction =&gt; {
                      transaction.isActive = (transaction.tscode == payload.tscode);
                  });
              },
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I develop the application using laravel and I use one of laravel feature which is the laravel Mix.</p>