Vue.js: how to have routing across 3 columns - vuejs2

Question

I am trying to set up an page resembling:
========================================================================
+ Nav + Items + Individual Item +
+---------------+---------------+--------------------------------------+
+ * Cats + List + Individual Selected +
+ * Dogs + Of + Cat +
+ + Cats + OR +
+ + OR + Dog +
+ + Dogs + +
+ + + +
+ + + +
========================================================================
Usage example: Select 'Cats' in the 'Nav' column => retrieve a list of Cats (via REST/JSON) into the 'Items' column; Select an individual Cat from the list => retrieve an individual Cat (via REST/JSON) into the "Individual Item" column.
This looks like an application of Nested Routes (https://router.vuejs.org/guide/essentials/nested-routes.html) but my google-fu must be weak and I can't find a 3-level example like this anywhere.
It is easy to arrange an either/or approach where a single right-hand column renders either "List of Items" or 'Item.'
I have tried to use named views but I get to a point where I have 3 columns but when I render an 'Item' component, then the "List of Items" column is emptied.
It may be that I need to arrange to render both "List of Items" and 'Items' column at the same time (via 'components' in my router config) BUT these are remote REST calls so this is too heavyweight to be practical. Maybe 'computed' or 'watched' properties will assist in this case?
Is there an example of this three-level navigation somewhere?
Any help appreciated.
Edit:
this is the sort of thing I thought would be needed:
<div class="row">
<div class="col-2 bg-light sidebar">
<div class="sidebar-sticky">
<h3 class="h3 pl-3">Actions</h3>
<navigation />
</div>
</div>
<div class="col-3 ml-auto bg-info px-3">
<router-view />
</div>
<div class="col-7 bg-warning px-3">
<router-view name="entity" />
</div>
</div>
...
{
path: 'persons',
component: httpVueLoader('persons.vue'),
children: [
{
path: 'person/:id',
components: {
default: httpVueLoader('persons.vue'),
entity: httpVueLoader('person.vue')
}
}
]
},