Click on link changes the url but not the content/data on page

You have to update the data of products variable when you change the route as vue optimises page reloads and does not reload in your case if you are on same route.

You can adapt the approach: Fetching Before Navigation described in vue-router docs:

With this approach we fetch the data before actually navigating to the new route. We can perform the data fetching in the beforeRouteEnter guard in the incoming component, and only call next when the fetch is complete:

export default {  data () {    return {      product: {},      error: null    }  },  beforeRouteEnter (to, from, next) {    getProduct(to.params.id, (err, product) => {      if (err) {        // display some global error message        next(false)      } else {        next(vm => {          vm.product = product        })      }    })  },  // when route changes and this component is already rendered,  // the logic will be slightly different.  watch: {    $route () {      this.product = {}      getProduct(this.$route.params.id, (err, product) => {        if (err) {          this.error = err.toString()        } else {          this.product = product        }      })    }  }}

I couldnt really internalise the above answer with 'getProduct', so to be put simply.

I am using a Store and I needed to watch the $route and when it changes I called my store to dispatch the api call.

watch: {    $route () {      this.$store.dispatch('fetchStudyStandards',       this.$route.params.standardID);    }}

So basically watch the route and if it changes, re do your api call.