vuetable-2动态改变行数的问题

Question

在vue-cli中使用vuetable-2，通过select想要动态的改变表格显示的行数。如下代码。
当改变select的时候，表格的行数并没有改变，需要点击下一页或者其它页码的时候才会改变表格中显示的行数。
我想要的是改变select的时候，表格马上改变行数，求解。

<select v-model="currentItemsCount">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select>

<vuetable class="table table-striped table-bordered"
          cellspacing="0" ref="vuetable"
          api-url="https://vuetable.ratiw.net/api/users"
          :fields="fields"
          :per-page="parseInt(currentItemsCount)"
          pagination-path=""
          @vuetable:pagination-data="onPaginationData">
</vuetable>

export default {
    data () {
        return {
        currentItemsCount: 10
        }
    },
    ...
}

Answer 1

这个用change事件或者用Vue的watch都可以。以下代码是用watch

watch: {
      currentItemsCount: function(newVal) {
        // console.log(newVal);
        this.changePageSize();
    }
  },
  methods: {
      changePageSize: function() {
        // 加载当前要展示的数据
    }
  }

Answer 2

试了在watch中使用this.$refs.vuetable.refresh()也不生效