I am new to Vue.js and encountered this problem.

I have this simple piece of code in App.vue

```
<div v-for="brand in response" v-bind:key="brand.BrandId">
    <router-link v-bind:to="{name: 'brand', params: {brandId: brand.BrandId } }">
        {{brand.Name}}
    </router-link>
</div>
<router-view />

```

The router/index.js routes array item looks like this:

```
{
    path: '/brand/:brandId',
    name: 'brand',
    component: () => import('../views/BrandDetail.vue')
}

```

I received the response from API. It is a valid array of objects. The menu is showing fine.

I would expect the router view to update on the click of the router-link. It does update the URL (#/brand/id), but the router view does not update.

There are other router-links that are hardcoded. If I go there and back to any dynamically added router-link it works as expected but if I click one dynamic router-link and then another the router-view is stuck in the first one.

I also tried to add a reactive data source to the key but that did not help.

Can someone explain to me what is going on here?