I have an application with a sidebar. As a default, when loading patient/:id I want to load the the Patient view, which on default should also load its sub-view PatientDashboard.

Inside the Patient view component, I have a router-view which should on default load the PatientDashboard-component.

However, every time I load the page to the route patient/:id I need to switch back and forth between teh sidebar buttons of PatientDashboard and Timeline to get my PatientDashboard-Component loaded.

So how do I get the default subroute to load the component on it's first load?

Patient-Component:

<template>
  <div">
    <ProfileSidebar :sidebar_elements="sidebar_elements"/>
    <div id="profile_content">
      <router-view :key="$route.fullPath" />
    </div>
  </div>
</template>

Router:

const routes = [
{
    path: "/patient/:patient",
    name: "Patient",
    component: Patient,
    props: true,
      children: [
        {
          path: "timeline",
          name: "Timeline",
          component: Timeline
        },
        {
          path: "",
          name: "PatientDashboard",
          component: PatientDashboard
        },
      ],

  },
]