Cascading dropdown using Vuejs

I am trying to create a cascading dropdown using Vuejs.
I want to set the data on the second dropdown based on the Item chosen from the first dropdown.
I don’t know how filter the data based on the chosen item
I’ve tried to use computed but didn’t succeed.
I need some help please.
Thanks in advanced.

<template>
  <b-container class="my-2">
    <b-row>
      <b-col col="12" md="6" lg="3">
        <b-form-group id="fieldset" :label="$t('tradingCalculators.fields.currencyPair')" label-for="currency-first" label-size="lg">
              <v-select
                id="assetPair"
                @click="changeAssetClass(assetPair)"
                v-model="assetPair"
                :searchable="true"
                :options="assetSymbols"
              />
            </b-form-group>
          </b-col>
          <b-col cols="12" md="6" lg="3">
            <b-form-group id="fieldset-1"               :label="$t('tradingCalculators.fields.currencyPair')" label-for="currency-pair" label-size="lg">
              <v-select id="symbolsPair" v-model="symbolsPair" :searchable="true" :options="currencyArray" />
            </b-form-group>
      </b-col>
    </b-row>
  </b-container>
</template>

export default {
data() {
assetPair: ‘Forex’,
symbolsPair: ”,
currencyArray: [],
assetsSymbols: [{
text: ‘Forex’,
id: 1
},
{
text: ‘Metal’,
id: 2
},
{
text: ‘Indices’,
id: 3
},
],
symbolsPair: {
1: [{
text: ‘AUDCAD’,
id: 1,
},
{
text: ‘AUDCHF’,
id: 2,
},
{
text: ‘AUDJPY’,
id: 3,
},
],
2: [{
text: ‘XAUUSD’,
id: 1,
},
{
text: ‘XAGUSD’,
id: 2,
},
],
3: [{
text: ‘GER30Cash’,
id: 1,
},
{
text: ‘US30Cash’,
id: 2,
},
{
text: ‘EU50Cash’,
id: 3,
},
],
}
},
computed() {
changeAssetClass(e) {
return this.currencyArray.push(this.symbolsPair[e])
}
}
}