Vue.js and OMDb pages with router

Question

Im trying to use bootstrap-vue pagination nav, so that when I change the page on the page button, that change would be passed into ajax call based on the requested page.

My router:

export default new Router({
  routes: [
    {
      path: '/route/:moviename/',
      name: 'myComponent',
      props: true,
      component: myComponent
    }
  ]
})

And my Vue component:

// This is my nav-bar

<template>
     <div>
        <b-pagination-nav
          :link-gen='linkGen'
          :number-of-pages='pages'
          use-router
        ></b-pagination-nav>
    </div>
</template>

<script>
export default {
  props: ['moviename'],
  data () {
    return {
      res: '',
      pages: 1,
    }
  },
  methods: {
    myFunction (value) {
      // added &page=1 to the url to illustrate where it should be
      fetch('https://www.omdbapi.com/?s=' + value + ' &page=1 &apikey')
        .then(res => {
          return res.json()
        })
        .then(res => {
            this.res = res
            this.pages = Math.ceil(res.totalResults / 10)
          }
        })
    },
    // adds new path to router (route/moviename?page=pageNum)
    linkGen (pageNum) {
      return pageNum === 1 ? '?' : `?page=${pageNum}`
    }
  },
  mounted () {
    this.myFunction(this.moviename)
  },
  watch: {
    moviename (value) {
      this.myFunction(value)
    }
  }
}
</script>

How do I modify my code, that /route/moviename?page=2 etc. would be accounted in the ajax call when linkGen makes a new url into router? I tried different things, but reverted the code back to my starting point. My logic is that watcher should be modified to listen the page change, but I'm new to Vue. :(

EDIT: Here's how I solved the problem

linkGen (pageNum) {
      return pageNum === 1 ? `/route/${this.$store.state.title}` : `/route/${this.$store.state.title}&page=${pageNum}`
    }

Answer 1

myComponent should check for the page number in the current $route query object:

<!-- myComponent template -->
<template>
  <div>
    <p>Movie: {{ $route.params.moviename }}</p>
    <p>Page Number: {{ pageNum }}</p>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
export default {
  name: 'myComponent',
  data() {
    // Response from AJAX query stored here
    result: ''
  },
  computed: {
    pageNum() {
      // Fallback to page 1 if no page query parameter in the current route
      return this.$route.query.page || '1'
    }
  },
  watch: {
    pageNum: {
      // Use an immediate watcher so that AJAX request made on created
      immediate: true,
      handler(newPage, oldPage) {
        // perform AJAX query here
        // Just some example code you would need to modify
        // based on you API calls and needs
        this.$axios.get('/some/url/here/' this.$route.params.moviename + '/' + newPage)
          .then(response => {
             this.result = response.data
          })
          .catch(() => {
            this.result = 'Error'
          })
      }
    }
  }
}
</script>