Nuxt js - passing object params in dynamic route

Question

I'm using the following link to dynamic routes

<nuxt-link :key="$route.fullPath" :to="{ name: 'items-id', params: { parent: { id: item.parent.id, description: item.parent.description } }}">Click me</nuxt-link>

So navigating to /items/ correctly passes the specified params. But if i click another nuxt-link with different params, while being on the /items/ url then nothing happens. I imagine it's because the url doesn't really change.

What's the best way to "reload" the url with new params?

I've considered using path which would be different for each nuxt-link

<nuxt-link :key="$route.fullPath" :to="{ path: '/items/' + item, params: { parent: { id: item.parent.id, description: item.parent.description } }}">Click me</nuxt-link>

But this makes the URL ugly as it includes the object ref

Answer 1

Just watch() the params (probably the id) and reload data when they change:

watch: {
  id() {
     // reload your item here
  },
  ...
},

Answer 2

Using watch should do it. Just update the variable you want to change according to the value for example if you want to watch for the id variable then set it to a component variable that you will want to be displayed.

watch: { 
 id (value) {
  this.VARIABLE = value
 }
}