Nested subroutes using vue-router - vue.js

Question

Im using Vue.js with Vue-router. I'm trying to create a list of components, each of which shows a subroute.
Example of What I am trying to do:
<ul>
<li>first
<ul><li>nested sub</li></ul>
</li>
<li>second
<ul><li>nested sub</li></ul>
</li>
<li>third
<ul><li>nested sub</li></ul>
</li>
</ul>
I am only able to get the nested subroute to appear in the first component. The rest of my components rendered in the v-for loop have no subroutes appearing.
Here is a fiddle of my code, showing the problem: https://jsfiddle.net/retrogradeMT/73zza1ah/
HTML:
<div id="page-content">
<router-view></router-view> <!-- renders campaign block list -->
</div>
<template id="campaignBlock" >
<ul>
<li v-for="campaign in campaigns">{{ campaign.name }}
<router-view> </router-view> <!-- should show subroute -->
</li>
</ul>
</template>
<template id="subroute">
<ul>
<li>Nested View</li>
</ul>
</template>
JS:
Vue.use(VueRouter)
Vue.component('app-page', {
template: '#campaignBlock',
data: function() {
return{
campaigns: []
}
},
ready: function () {
this.fetchCampaigns();
},
methods: {
fetchCampaigns: function(){
var campaigns = [
{
id: 1,
name: 'First List item'
},
{
id: 2,
name: 'Second List item'
},
{
id: 3,
name: 'Third List item'
},
];
this.$set('campaigns', campaigns);
}
}
})
Vue.component('subroute', {
template: '#subroute'
})
var App = Vue.extend({})
var router = new VueRouter()
router.map({
'/': {
component: Vue.component('app-page'),
subRoutes: {
'/': {
component: Vue.component('subroute')
},
}
}
})
router.start(App, '#page-content')

Answer 1

There can only be one single nested and identical router-view inside another. No way around it. For different routes, you can have multiple instances of router-view.
What you can do is something like this:
<li v-for="campaign in campaigns">{{ campaign.name }}
<subroute></subroute>
</li>