[Vuejs]-How to update data from vue-tables-2 after action from Template?

• First, defined an EventBus if you don’t have

  EventBus.vue

    import Vue from 'vue'
    export default new Vue()

• In ListPayment.vue, import EventBus and listen for refresh-table event. Note that I add ref="table" to vue-tables-2 element

  <template>
    <v-server-table ref="table" ... />
  </template>
  
  <script>
  import EventBus from './EventBus.vue'
  
  export default {
    mounted() {
      EventBus.$on('refresh-table', this.refreshTable)
    },
    beforeDestroy() {
      EventBus.$off('refresh-table', this.refreshTable)    
    },
    methods: {
      refreshTable() {
        this.$refs.table.refresh();
      }
    }
  
  }
  </script>
  

• Finally, emit event in modal

    pay() {
        service.pay(this.data)
            .then(() => {
              EventBus.$emit('refresh-table')
            })
            .then(this.hide());
    }