как изменить data при изменении route.query.page?

например если перейти на 3 страницу пагинациии, а потом нажать в браузере назад, route.query.page меняется, а контент не меняется, если просто кликать по пагинации то все норм, url и контент меняется, как отследить url и менять контент при клике на кнопку назад в браузере? url такой: http://localhost:3000/category/610?page=3 например что бы когда меняется: -> ?page=3 был равен pageNum

<div class="page"
                 v-if="filteredProducts.length > 20"
                 v-for="page in pages"
                 :key="page"
                 :class="{'page__selected' : page === pageNum}"
                 @click="pageClick(page)">
                {{ page }}
            </div>
data() {
    return {
      view: true,
      productsPerPage: 20,
      pageNum: 1,
}}
computed:{
paginatedProducts() {
      let from = (this.pageNum - 1) * this.productsPerPage,
        to = from + this.productsPerPage;
      return this.filteredProducts.slice(from, to);
    },
}
methods:{
pageClick(page) {
      this.$router.push({
        query: {
          ...this.$route.query,
          page: page,
        },
      })
      this.pageNum = page;
    },}