Route parameter is not passed if it is an object with router-link

Question

I am trying to pass 2 parameters in a router-link tag.

The component that has the router link:

<template>
<router-link class="pilot-link" :to="{ name: 'PilotCard', params: {cid: pilot.cid , pilotdetails: pilot } }">
  <div class="pilot-card">
    <span>{{ pilot.realname }} with callsign {{ pilot.callsign }} </span>
    <h4>Server: {{ pilot.server }}</h4>
  </div>
  </router-link>
</template>

<script>
export default {
  name: "VatsimPilot",
  props: {
    pilot: {
      type: Object,
      required: true
      }
  }
}
</script>

I want to pass the cid property of the object and also the whole object. I am using the property cid to the route path and i want to use the full object in the destination component.

The route is as follows:

  {
    path: "/pilot/:cid",
    name: "PilotCard",
    props: true,
    component: PilotCard
  },

props is set to true in order for the params to be passed as props to the component.

The destination component:

<template>
            <h1>Pilot Data for {{ pilotdetails }}</h1>
            <h1>Pilot Data for {{ cid }}</h1>
</template>

<script>
export default {
    props: ['pilotdetails','cid']
}
</script>

The above renders nothing for the realname but renders ok for the cid :

If i remove the realname property it seems that it is recognized as Object:

I even tried directly with $route and i get the exact same results as above

<template>
            <h1>Pilot Data for {{ this.$route.params.pilotdetails }}</h1>
            <h1>Pilot Data for {{ this.$route.params.cid }}</h1>
</template>