Cascading dropdown using Vuejs

Question

I'm trying to create a cascading dropdown using vue.js. I want to set the data on the second dropdown based on the item chosen from the first dropdown. I don't know how to filter the data based on the chosen item. I've tried to use computed property but didn't succeed. I need some help please. Thanks in advance.

<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])
        }
      }
    }