title: VueTable 2 $refs object empty in mounted hook
body: <p>I've read several posts where the <strong>$refs</strong> property of the vue instance is only available in the mounted hook of Vue.js</p>
  
  <p>I have a custom event listener set up in my vue component that listens to a change of date in an input field. Once this happens I am changing the query parameter of the date to fetch a new set of results from my API.</p>
  
  <p>My problem is that I cannot run the refresh() method with my new query parameter.</p>
  
  <p>Here's my component</p>
  
  <pre><code>&lt;template&gt;
      &lt;vuetable
          :fields="table.fields"
          :apiUrl="table.url"
          :append-params="urlParams"
      &gt;&lt;/vuetable&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import { eventBus } from '../app.js';
      import Vuetable from 'vuetable-2';
      import moment from 'moment';
  
      export default {
          data: function() {
              return {
                  urlParams: {
                      d: moment().add(1, 'd')._d, // date selected
                      //p: null, // product selected
                  },
                  lineItems: '',
                  table: {
                      url: '/home/bakery/lineitems/', // by default we need tomorrows orders
                      showTable: false,
                      fields: [
                          { name: 'order_id', title: 'Order#' }, 
                          { name: 'customer_name', title: 'Customer' }, 
                          { name: 'qty', title: 'QTY' }, 
                          { name: 'product_name', title: 'Product' }, 
                          { name: 'variation', title: 'Variations', callback: 'formatArray' }, 
                          { name: 'collection_time', title: 'Timeslot' }, 
                          { name: 'store', title: 'Transport' }, 
                          { name: 'order_id', title: 'Actions' }
                      ],
                  },
              }
          },
          components: {
              'vuetable': Vuetable,
          },
          methods: {
              filterByProduct: function(val, ev) {
                  this.selectedProduct = val;
                  this.table.url = '/home/bakery/lineitems?d=' + moment(data) + '&amp;p=' + val;
              },
              formatArray: function(val) {
                  var valArray = JSON.parse(val); // convert API string to array
  
                  var text = '&lt;ul&gt;'; 
                  for(var i in valArray) {
                      text += '&lt;li&gt;' + valArray[i].key + ': ' + valArray[i].value + '&lt;/li&gt;';
                  }
                  text += '&lt;/ul&gt;';
  
                  return text;
              },
          },
          mounted: function() {
              //console.log(this.$refs);
              eventBus.$on('dateSelected', (data) =&gt; {
                  self = this;
                  self.urlParams.d = moment(data);
                  Vue.nextTick( function() {
                      self.$refs.vuetable.refresh();
                  });
              });
              eventBus.$on('filter-set', (data) =&gt; {
                  console.log(data);
              });
              // continuously check for updates in the db 
              setInterval(function () {
                  //this.getProductTotals(this.selectedDate);
              }.bind(this), 5000); 
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Everything runs 100% fine including running <strong>Vue.nextTick()</strong></p>
  
  <p>If I console.log <strong>self.$refs</strong> I get an empty object. I'm unable to get anything other than an empty Object even in my root app.js file.</p>