Good implementation

ResultsPage.good.vue

<template>
  <div>
    <ul>
      <li v-for="item in results" :key="item.id">
        {{ item.name  }}
      </li>
    </ul>
    
    <Checkbox
      :value="filters.isNew"
      @input="$router.push({ query: { ...$route.query, isNew: !$event }})"
    />
    
    <Pagination
      :value="page"
      @input="$router.push({ query: { ...$route.query, page: $event }})"
    />
  </div>
</template>

<script>
export default {
  name: 'ResultsPage',
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.page = to.page.query.page || 1
      vm.filters.isNew = !!to.page.query.isNew
      vm.fetchResults()
    })
  },
  async beforeRouteUpdate  (to, from, next) {
    this.page = to.page.query.page || 1
    this.filters.isNew = !!to.page.query.isNew
    await this.fetchResults()
    next()
  },
  data: () => ({
    results: [],
    page: 1,
    filters: {
      isNew: false
    }
  }),
  methods: {
    async fetchResults () {
      const { data } = await SomeApiCall({
        filters: this.filters,
        page: this.page
      })
      this.results = data
    }
  }
}
</script>