Multi level drop down listing in Vue js - vue.js

Question

I have been searching for 3 level category listing sample. I found few samples for 2 levels. The below sample derived from 2 levels.
I was facing an issue with triggering v-model computed event after selecting subcategory item, to solve this we need to add v-model="subcategory" and the same has to be declared in data()
Click here
**HTML**
<link rel='stylesheet prefetch'
href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css'>
<div class="container" id="app">
<div class="section">
<h1 class="title">Vue.js - Conditional Select</h1>
<hr>
<conditional-select
:categories="categories":newcategories="newcategories"
:subcategories="subcategories" ></conditional-select>
</div><!-- /.section -->
</div><!-- /.container -->
**Vue.js**
Vue.component('conditional-select', {
template: `
<div id="ConditionalSelect">
<div class="select">
<select v-model="category" name="category">
<option v-for="category in categories"
:value="category.id">{{ category.name }}</option>
</select>
</div>
<div class="select">
<select v-model="subcategory" name="subcategory">
<option v-for="subcategory in conditionalSubcategories"
:value="subcategory.subid" :selected="subcategory.selected == true">{{
subcategory.name }}</option>
</select>
</div>
<div class="select">
<select name="newcategory">
<option v-for="newcategory in conditionalNewcategories"
:value="newcategory.id" :selected="newcategory.selected == true">{{
newcategory.name }}</option>
</select>
</div>
</div>
`,
props: ['categories', 'subcategories', 'newcategories'],
data() {
return {
category: '',
subcategory: '',
}
},
computed: {
conditionalSubcategories() {
return this.subcategories.filter(subcategory => {
return subcategory.category_id == this.category;
});
},
conditionalNewcategories() {
return this.newcategories.filter(newcategory => {
return newcategory.subcategory_id == this.subcategory;
});
},
},
created() {
let category = this.categories.find(category => {
return category.selected == true;
});
let subcategory = this.subcategories.find(subcategory => {
return subcategory.selected == true;
});
this.category = category.id;
this.subcategory = subcategory.subid;
}
});
var app = new Vue({
el: '#app',
data: {
categories: [
{ id: '0', name: 'Select a category', selected: true },
{ id: '1', name: 'Games', selected: false },
{ id: '2', name: 'Apps', selected: false }
],
subcategories: [
{ subid: '0', category_id:'1', name: 'Select a subcategory',
selected:
false },
{ subid: '1', category_id:'1', name: 'Adventure', selected: false
},
{ subid: '2', category_id:'1', name: 'Shooter', selected: false },
{ subid: '3', category_id:'1', name: 'Simulation', selected: false
},
{ subid: '4', category_id:'1', name: 'Sports', selected: false },
{ subid: '5', category_id:'2', name: 'Illustration', selected:
false },
{ subid: '6', category_id:'2', name: 'Music Production', selected:
false },
{ subid: '7', category_id:'2', name: 'Webdesign', selected: false
},
{ subid: '8', category_id:'2', name: 'Office', selected: false },
],
newcategories: [
{ id: '1', subcategory_id:'1', name: 'New Adventure', selected:
false },
{ id: '2', subcategory_id:'1', name: 'New Shooter', selected: false
},
{ id: '3', subcategory_id:'1', name: 'New Simulation', selected:
false },
{ id: '4', subcategory_id:'1', name: 'New Sports', selected: false
},
{ id: '5', subcategory_id:'2', name: 'New Illustration', selected: false
},
{ id: '6', subcategory_id:'2', name: 'New Music Production',
selected: false },
{ id: '7', subcategory_id:'2', name: 'New Webdesign', selected:
false },
{ id: '8', subcategory_id:'2', name: 'NewOffice', selected: false
},
],
}
});