title: Vue.js - update router view
body: <p>I am new to Vue.js and encountered this problem.</p>
  
  <p>I have this simple piece of code in App.vue</p>
  
  <pre><code>&lt;div v-for="brand in response" v-bind:key="brand.BrandId"&gt;
      &lt;router-link v-bind:to="{name: 'brand', params: {brandId: brand.BrandId } }"&gt;
          {{brand.Name}}
      &lt;/router-link&gt;
  &lt;/div&gt;
  &lt;router-view /&gt;
  </code></pre>
  
  <p>The router/index.js routes array item looks like this:</p>
  
  <pre><code>{
      path: '/brand/:brandId',
      name: 'brand',
      component: () =&gt; import('../views/BrandDetail.vue')
  }
  </code></pre>
  
  <p>I received the response from API. It is a valid array of objects. The menu is showing fine.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I also tried to add a reactive data source to the key but that did not help.</p>
  
  <p>Can someone explain to me what is going on here?</p>