Vue Router 编程式导航问题

methods 里的 toPage 是做分页用的， router.push 还是到当前路由，只是修改 query 参数，但是路由没有跳转， 手动修改浏览器 url 参数，可以触发 beforeRouteUpdate，不知道是不是我哪里有写错，router 版本 3.0.1

export default {
    name: "Event",
    data() {
        return {
            query: {
                per_page: 40
            },
            pagination: {},
            tableHight: null
        }
    },
    methods: {
        toPage(page) {
            Object.assign(this.query, {page: page})
            this.$router.push({name: 'event', query: this.query})
        },
        loadData() {
            const _self = this
            _self.$http.get('/event/main', {params: _self.query}).then(resp => {
                _self.pagination = resp.data;
            })
        },
        watchQuery(query) {
            if (query)
                this.query = Object.assign(query, {per_page: this.query.per_page || 40})
            this.loadData()
        }
    },
    beforeRouteUpdate(to, from, next) {
        // react to route changes...
        // don't forget to call next()
        this.watchQuery(to.query)
        next()
    },
    mounted() {
        const _self = this
        _self.watchQuery(_self.$route.query)
        _self.tableHight = _self.$el.offsetHeight - 48 - 38
        window.onresize = () => {
            _self.tableHight = _self.$el.offsetHeight - 48 - 38
        };
    }
}