Vue router - problema com links dinamicos

Então, estou desenvolvendo uma aplicação com node e vue, e me surgiu um problema ao gerar links dinâmicos:
No meu backend tenho uma função getBeerByStyle (que funciona corretamente).
Já no meu front ent, tenho um drawer. Neste drawer, há uma opção "Cervejas" que carrega todos os estilos de cerveja (retornando Id e nome) p/ fazer um menu de navegação:

<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
  })
},

Porém surge um problema: Na primeira vez que clico em um dos estilos (para buscar todas as cervejas daquele estilo) funciona tudo perfeitamente. Mas na segunda vez, somente o URL é alterado, mas o conteúdo da página não é renderizado.
Dei uma pesquisada e aparentemente preciso usar o Watch para oberservar mudança na rota, mas mesmo usando

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

o meu problema não foi resolvido.

Estou tentando arrumar a dois dias sem sucesso.
Espero que alguém possa me ajudar.
Desde já agradeço!

PS: Segue o link para o meu github com o arquivo em questão, se necessário:
https://github.com/gabrielporcher/projeto/blob/master/frontend/src/components/template/Drawer.vue