Good implementation without data

ResultsPage.good.short.vue

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

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