VueJS Router - change named view in root with child route - vue.js

Question

The ask
Control a root-level view from a child route. The example below is one level deep, but I could need to control the other view from deeper routes.
Have both the default view and another view in a single template, other simply must live at this level and will not work how I need if nested within other components:
<router-view name="default"/>
<router-view name="other">/>
Must have a parent-child route relationship to maintain navigation functionality (router-link-active)
Attempts
For a route, have the view set:
{
path: '/my-path',
component: ComponentOne,
}
Going to /my-path shows ComponentOne in default view, other view is empty, as it should.
Now at a child route, I want the other view to show ComponentTwo.
This does not work because it expects other view to be within default view, and so ComponentTwo is simply not rendered:
{
path: '/my-path',
component: ComponentOne,
children: [
{
path: '/my-path/more',
components: {
'other': ComponentTwo
}
}
]
}
This does not work because it does not maintain the parent-child relationship:
{
path: '/my-path',
component: ComponentOne
},
{
path: '/my-path/more',
components: {
default: ComponentOne,
other: ComponentTwo
}
}

Answer 1

I don't think it's possible to control a router-view from a nested route.
However, to do what you ask quickly, the solution would be to manage the contents of all (/my-path and sub-routes), in a nested route even for the path /my-path as well. You don't even need named routes.
I'll explain better with an example:
{
path: '/my-path',
component: ComponentWrapper,
children: [
{
path: '', // Match '/my-path' or '/my-path/'
component: ComponentOne
},
{
path: 'more', '/my-path/more'
component: ComponentTwo
}
]
}
In the ComponentWrapper you have to insert a router-view to render the nested routes and everything will work fine, even parent-child route relationship.

Answer 2

Unfortunately Leonardi's solution does not work if you wanted to refer to the the current child's component from a component that's more than 1 level higher in the hierarchy (i.e. a layout).
I was able to work around this by writing a computed method to determine the component of the current child route in the parent component.
{
path: '/my-path',
component: ComponentOne,
children: [
{
path: '/my-path/more',
components: {
'other': ComponentTwo
}
}
]
}
<!-- App.vue or SomeLayout.vue -->
<template>
<router-view /> <!-- ComponentOne -->
<component :is="componentOfCurrentChildRoute" /> <!-- ComponentTwo -->
</template>
<script>
export default {
computed: {
componentOfCurrentChildRoute() {
// Get an array of the current route ancestor hierarchy
const {matched} = this.$route;
// Return the component defined by the current child route
return matched?.[matched.length - 1]?.component; // or components.sidebar if using named views
}
}
}
</script>