JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue"></script>
<div id="app">
<select v-model="selectbox1">
<option value="food">Food</option>
<option value="drink">Drink</option>
<option value="desert">Desert</option>
</select>
<select v-model="selectbox2">
<option v-for="option in setOptions" v-bind:value="option.val">{{option.text}}</option>
</select>
<br><br>
<span>selected: {{selectbox1}} {{selectbox2}}</span>
</div>
JavaScript
new Vue({
el:'#app',
data:{
selectbox1: undefined,
selectbox2: undefined,
},
computed: {
setOptions: function(){
if (this.selectbox1 === 'food'){
var options = [{val: 'pizza', text: 'Pizza'},
{val: 'lasagna', text: 'Lasagna'},
{val: 'salad', text: 'Salad'}]
} else if (this.selectbox1 === 'drink'){
var options = [{val: 'beer', text: 'Beer'},
{val: 'wine', text: 'Wine'},
{val: 'coke', text: 'Coke'},
{val: 'water', text: 'Water'}]
} else if (this.selectbox1 === 'desert'){
var options = [{val: 'tiramisu', text: 'Tiramisu'},
{val: 'icecream', text: 'Icecream'},
{val: 'espresso', text: 'Espresso'}]
}
return options
}
}
})