Named views with children in Vue? - vue.js

Question

I have a single page with multiple <router-view/> shown at the same time using named views.
That works well, however I need to also add children to each view but can't figure out how to do that.
Here is more details on my layout.
The vue main component:
<template>
<div>
<router-view name="files"/>
<router-view name="forms"/>
<router-view name="tools"/>
</div>
</template>
...
Router:
let router = new Router({
path: ':resourceTab',
name: 'Resources',
components: {
files: FilesMain,
forms: FormsList,
tools: ToolsList,
},
props: true,
})
new Vue({
el: '#app',
router: router,
store,
render: h => h(App)
})
Here is what I'm looking to accomplish:
{
path: ':resourceTab',
name: 'Resources',
components: {
files: {component: FilesMain, children: [{path: file/:fileId}] <- Just made up this syntax to show the idea. How to accomplish something like this?
forms: FormsList,
tools: ToolsList,
},
props: true,
}
At the moment I do it by adding more paths like below, but that just creates redundancy and I have to pass the value for the "resourceTab" everytime:
{
path: 'files',
name: 'Resources',
components: {files: FilesMain},
children:[{path: file/:fileId}]
props () => {resourceTab: "files"},
},
{
path: 'forms',
name: 'Resources',
components: {forms: FormsList},
children:[{path: forms/:formId}]
props () => {resourceTab: "forms"},
}
...etc
Is there a better way of organising subviews in such a dynamic layout?