Vue Js: Props not being passed to component, only showing on page refresh

Question

I'm new to Vue and obviously I'm missing something fundamental here.

I have an app with a list of items, click on one of the items and a new "single" view appears. However the props aren't making it into the single view unless I refresh the page.

Here's an abbreviated version of the main markup items in question:

<div class="container-fluid" id="app">
    <div class="row">
      <router-view name="default" :partners=partners :partner="partner"></router-view>
      <router-view name="list" :filtered="filtered" ></router-view>
      <router-view name="modalform" :showmodal="showmodal" :partner="partner" :form="form"></router-view>
    </div>
  </div>

<script id="list-template" type="text/template">
  <div class="col-lg-9" id="list">
    <div class="row">
      <div class="col-md-6 col-lg-4" v-for="partner in filtered">
        <router-link  class="link" :to="{ name: 'single', params: { partnerId: partner.id }}">  
          <h6>${partner.name}</h6>
        </router-link>
      </div>
    </div>
  </div>
</script>

Here's my route:

  const routes = [
    { 
      path: '/', 
      components: 
      {
        default: Vue.component('sidebar'),
        list: Vue.component('list') 
      },
      props: { 
        default: true, 
        list: true
      }   
    },
    { 
      path: '/:partnerId', 
      name: 'single',
      components: {
        default: Vue.component('single'),
        modal: Vue.component('modalform')
      }, 
      props: { 
        default: true, 
        modal: true 
      }  
    }
  ]

And here's a shortened version of my component:

Vue.component("single", {
    template: '#single-template',
    delimiters: ['${', '}'],
    props: ["partners", "partner"]
})