title: Vuetable return to page 1 after I have clicked page 5 and updated one of the content then click back
body: <p>First, I clicked page 5 then clicked edit on one of item.
  Second, I clicked updated and clicked back to previous page which has vuetable.
  Then the vuetable pagination return back to page 1.</p>
  
  <p>Is there any solution to prevent the page number go back to 1? </p>
  
  <p>I have tried "query-params" but doesn't seem to work.</p>
  
  <p>SalesOrderAdmin.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;section class="content-header"&gt;
              &lt;h1&gt;
                  Sales Order
              &lt;/h1&gt;
  
  
          &lt;/section&gt;
          &lt;div class="content"&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="col-md-12"&gt;
                  &lt;div class="box box-info"&gt;
                    &lt;div class="box-body"&gt;
                      &lt;div class="table-responsive"&gt;
                          &lt;myvuetable :apiUrl="apiUrl" :fields='fields' :page_no='page_no'&gt;&lt;/myvuetable&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
              return {
                  apiUrl: '/ajax/getsalesorder',
                  page_no: 5,
                  fields: [
                    {
                      name: '__sequence',
                      title: '#',
                      titleClass: 'center aligned',
                      dataClass: 'center aligned'
                    },
                    {
                      name: 'name',
                      title: 'Name',
                      sortField: 'name',
                      direction: 'asc'
                    },
                    {
                      name: 'payment_type',
                      title: 'Payment Method',
                      sortField: 'payment_type',
                    },
                    {
                      name: 'payment_bank_file',
                      title: 'Payment Bank File',
                      sortField: 'payment_bank_file',
                      callback: 'linkLabel'
                    },
                    {
                      name: 'total_amount',
                      title: 'Paid Amount',
                      sortField: 'total_amount',
                      direction: 'asc'
                    },
                    {
                      name: 'status',
                      title: 'Order Status',
                      sortField: 'status',
                      direction: 'asc'
                    },
                    {
                      name: 'created_by',
                      title: 'Created By',
                      sortField: 'created_by.name',
                    },
                    {
                      name: 'created_at',
                      title: 'Created At',
                      sortField: 'created_at',
                    },
                    {
                      name: '__slot:actions',   // &lt;----
                      title: 'Action',
                      titleClass: 'center aligned',
                      dataClass: 'center aligned'
                    }
                  ],
              }
          },
          props: ['is_admin'],
          methods : {
            init () {
              var $vm = this;
            },
          },
          mounted() {
              this.init();
              console.log('Page distributor mounted.')
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Myvuetable.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="table no-margin"&gt;
      &lt;filter-bar&gt;&lt;/filter-bar&gt;
      &lt;div class="vue-table-wrapper"&gt;
          &lt;div class="vue-table-loading"&gt;&lt;div class="loader"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;vuetable ref="vuetable" 
            :api-url="apiUrl" 
            :fields="fields" 
            :per-page="20" 
            :css="css" 
            :append-params="appendParams"
            :query-params="{page: 'page_no'}"
            pagination-path="" 
            @vuetable:loading="onLoadingData"
            @vuetable:load-success="onLoadSuccess"
            @vuetable:pagination-data="onPaginationData" 
            @vuetable:checkbox-toggled-all="onCheckboxToggledAll"
            @vuetable:checkbox-toggled="onCheckboxToggled"
          &gt; 
            &lt;template slot="actions" slot-scope="props"&gt;
                &lt;router-link v-if="actionsBtnVisibility(props.rowData.actions, 'view')" :to="{ path: props.rowData.actions.view}"&gt;
                    &lt;i class="fa fa-search-plus"&gt;&lt;/i&gt;
                &lt;/router-link&gt;
                &lt;router-link v-if="actionsBtnVisibility(props.rowData.actions, 'edit')" :to="{ path: props.rowData.actions.edit}" title="Cloak User"&gt;
                    &lt;i class="fa fa-edit"&gt;&lt;/i&gt;
                &lt;/router-link&gt;
                &lt;a v-if="actionsBtnVisibility(props.rowData.actions, 'download')" :href="props.rowData.actions.download"&gt;&lt;i class="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;
  
                &lt;a v-if="actionsBtnVisibility(props.rowData.actions, 'download_order')" :href="props.rowData.actions.download_order" target="_blank"&gt;&lt;i class="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;
  
                &lt;a v-if="actionsBtnVisibility(props.rowData.actions, 'download_attachment')" :href="props.rowData.actions.download_attachment" download&gt;&lt;i class="fa fa-paperclip"&gt;&lt;/i&gt;&lt;/a&gt;
  
                &lt;a v-if="actionsBtnVisibility(props.rowData.actions, 'popup')" @click="popup(props.rowData.actions.popup)" style="cursor: pointer;"&gt;Update&lt;/a&gt;
  
                &lt;a v-if="actionsBtnVisibility(props.rowData.actions, 'login')" :href="props.rowData.actions.login" style="cursor: pointer;" title="Cloak User"&gt;&lt;i class="fa fa-key" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/template&gt;
          &lt;/vuetable&gt;
        &lt;/div&gt;
  
      &lt;div class="vuetable-pagination ui basic segment grid"&gt;
        &lt;vuetable-pagination-info ref="paginationInfo" 
        &gt;&lt;/vuetable-pagination-info&gt;
  
        &lt;vuetable-pagination-bootstrap ref="pagination" @vuetable-pagination:change-page="onChangePage"
            &gt;&lt;/vuetable-pagination-bootstrap&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;style scoped&gt;
  .vue-table-wrapper {
      position: relative;
  }
  .vue-table-loading {
      position: absolute;
      background: rgba(0,0,0,0.2);
      width: 100%;
      height: 100%;
  }
  .loader {
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite;
      margin: 00 auto;
      position: relative;
      top: 50%;
      margin-top: -25px;
  }
  
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  &lt;/style&gt;
  &lt;script&gt;
  
  export default {
      data(){
        return {
            css: {
              tableClass: 'ui blue selectable celled stackable attached table',
              loadingClass: 'loading', 
              detailRowClass: 'vuetable-detail-row',
              sortHandleIcon: 'grey sidebar icon',
              ascendingIcon: 'fa fa-sort-asc',
              descendingIcon: 'fa fa-sort-desc'
            },
            sortOrder: [
            ], 
            appendParams: {},
            checkboxes: []
        }
      },
      computed: {
          selectAll: {
              get: function () {
                  return this.checkboxes.length === this.$refs.vuetable.tableData.length;
              }
          },
      },
      props: [
          'apiUrl', 'fields', 'vueTableParams', 'page_no'
      ], 
      methods: {
          statusLabel (value){
              if(value == 'Success'){
                  return '&lt;span class="label label-success"&gt;Success&lt;/span&gt;';
              }else{
                  return '&lt;span class="label label-danger"&gt;Failed&lt;/span&gt;';
              }
          },
          activeLabel (value){
              if(value == 'active'){
                  return '&lt;span class="label label-success"&gt;Active&lt;/span&gt;';
              }else{
                  return '&lt;span class="label label-danger"&gt;Inactive&lt;/span&gt;';
              }
          },
          yesnoLabel (value){
              if(value == 1){
                  return '&lt;span class="label label-success"&gt;Yes&lt;/span&gt;';
              }else{
                  return '&lt;span class="label label-danger"&gt;No&lt;/span&gt;';
              }
          },
          approvalLabel (value){
              if(value == 'approved'){
                  return '&lt;span class="label label-success"&gt;Approved&lt;/span&gt;';
              }else if(value == 'processing'){
                return '&lt;span class="label label-warning"&gt;Processing&lt;/span&gt;';
              }else if(value == 'processed'){
                return '&lt;span class="label label-success"&gt;Processed&lt;/span&gt;';
              }else if(value == 'rejected'){
                return '&lt;span class="label label-danger"&gt;Rejected&lt;/span&gt;';
              }else{
                  return '&lt;span class="label label-warning"&gt;Pending&lt;/span&gt;';
              }
          },
          transactionLabel (value){
              if(value == 'processed'){
                  return '&lt;span class="label label-success"&gt;Processed&lt;/span&gt;';
              }else if(value == 'rejected'){
                  return '&lt;span class="label label-danger"&gt;Rejected&lt;/span&gt;';
              }else{
                  return '&lt;span class="label label-danger"&gt;Pending&lt;/span&gt;';
              }
          },
          accountLabel (value){
            if(value == 1){
                      return '&lt;span class="label label-success"&gt;Enabled&lt;/span&gt;';
                  }else{
                      return '&lt;span class="label label-danger"&gt;Disabled&lt;/span&gt;';
                  }
          },
          actionsBtnVisibility(actions, btn){
              if(actions &amp;&amp; typeof actions[btn] != 'undefined'){
                  return true;
              }
              return false;
          },
          linkLabel(value){
              if(value){
                  return '&lt;a href= "'+value+'" target="_blank"&gt;File&lt;/a&gt;';
              }
              else{
                  return '-';
              }
          },
          view_order(value){
              if(value){
                  var order = value.split("~");
                  return '&lt;a href= "/admin/salesorder/view/'+order[0]+'" target="_blank"&gt;'+order[1]+'&lt;/a&gt;';
              }
              else{
                  return '-';
              }
          },
          popup(id){
              this.$emit('updatestat', id);
          },
          onLoadingData (){
              //console.log('loading');
              $('.vue-table-loading').show();
          },
          onLoadSuccess (){
              $('.vue-table-loading').hide();
              //console.log('loading success');
          },
          onPaginationData (paginationData) {
              this.$refs.pagination.setPaginationData(paginationData) 
              this.$refs.paginationInfo.setPaginationData(paginationData) 
          },
          onChangePage (page) {
              this.$refs.vuetable.changePage(page) 
          },
          onFilterSet (filterText) {
  
              if(typeof this.vueTableParams != 'undefined'){
                  this.vueTableParams.filter = filterText;
                  this.appendParams = this.vueTableParams
              }else{
                  this.appendParams = { filter:filterText  }
              }
  
              var $vm = this;
              Vue.nextTick( () =&gt; $vm.$refs.vuetable.refresh())
          },
          onFilterParams (){
              this.appendParams = this.vueTableParams
              var $vm = this;
              Vue.nextTick( () =&gt; $vm.$refs.vuetable.refresh())
          },
          onFilterReset () {
              if(typeof this.vueTableParams != 'undefined'){
                  this.vueTableParams.filter = '';
                  this.appendParams = this.vueTableParams
              }else{
                  this.appendParams = {}
              }
  
              var $vm = this;
              Vue.nextTick( () =&gt; $vm.$refs.vuetable.refresh())
          },
          onCheckboxToggledAll(isChecked){
              this.checkboxes = this.$refs.vuetable.selectedTo;
              this.$emit('update:selected', this.checkboxes)
          },
          onCheckboxToggled(isChecked){
              this.checkboxes = this.$refs.vuetable.selectedTo;
              this.$emit('update:selected', this.checkboxes)
          }
      },
      mounted() {
          this.$events.$on('filter-params', eventData =&gt; this.onFilterParams(eventData))
          this.$events.$on('filter-set', eventData =&gt; this.onFilterSet(eventData))
          this.$events.$on('filter-reset', e =&gt; this.onFilterReset())
      }
  }
  &lt;/script&gt;
  </code></pre>