Vue router - problem with dynamic links

Question

So, I am developing an application with Node and Vue, and I came up with a problem when generating dynamic links: In my backend I have a getBeerByStyle function (which works correctly). On my front, I have a Drawer. In this Drawer, there is an option "Beers" that carries all styles of beer (returning Id and name) p/ make a navigation menu:

<v-list-item v-for="style in styles" :key="style.id">
  <v-list-item-title @click="toggleDrawer">
    <router-link :to="{ name: 'BeerByStyle', params: { id: style.id }}">
      {{style.name}}
    </router-link>
  </v-list-item-title>
</v-list-item>


getStyles(){
  const url = `${baseApiUrl}/styles`
  axios.get(url).then(res => {
    this.styles = res.data
  })
},

But a problem arises: The first time I click on one of the styles (to get all the beers of that style) everything works perfectly. But the second time, only the URL is changed, but the page content is not rendered. I did a search and apparently need to use the Watch to observe change in route, but even using

this.$store.dispatch(this.$route.params.id) 

my problem has not been solved.

I’ve been trying to arrange for two days without success. I hope someone can help me. Thanks in advance!

PS: Follow the link to my github with the file in question if necessary: https://github.com/gabrielporcher/projeto/blob/master/frontend/src/components/template/Drawer.vue