vue+iviewのメニューとタブの連携方法

<テンプレート>
  <div>
    <v-model="whereMap.model1" を選択
            スタイル="幅:200px"
            @on-change="getSecond">
      <オプション v-for="リスト1内の項目"
              :value="アイテムID"
              :key="item.id">{{ item.label }}</オプション>
    </選択>
    <v-model="whereMap.model2" を選択
            スタイル="幅:200px"
            @on-change="getThird">
      <オプション v-for="リスト2の項目"
              :value="アイテムID"
              :key="item.id">{{ item.label }}</オプション>
    </選択>
    <v-model="whereMap.model3" を選択
            スタイル="幅:200px">
      <オプション v-for="リスト3内の項目"
              :value="アイテムID"
              :key="item.id">{{ item.label }}</オプション>
    </選択>
    <ボタンクラス="search-btn"
            タイプ="デフォルト"
            @click="searchClear">クリア</Button></div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      データテスト: {
        l1: [
          {
            id: '猫',
            ラベル: '猫'
          },
          {
            id: '犬',
            ラベル: '犬'
          }
        ]、
        l2: {
          猫: [{ id: 'sc', label: '子猫' }, { id: 'bc', label: '大きな猫' }],
          犬: [{ id: 'sd', label: '子犬' }, { id: 'bd', label: '大型犬' }]
        },
        l3: {
          sc: [{ id: 'sc1', label: '小さな猫' }, { id: 'sc2', label: '小さなオレンジ色の猫' }],
          bc: [{ id: 'bc1', label: '大きなトラ猫' }, { id: 'bc2', label: '大きなオレンジ色の猫' }]
        }
      },
      リスト1: [],
      リスト2: [],
      リスト3: [],
      マップ: {
        モデル1: ''、
        モデル2: ''、
        モデル3: ''
      }
    }
  },
  マウント（）{this.init()}、
  作成された（）{
    この.init()
  },
  メソッド: {
    初期化（）{
      this.list1 = this.datatest.l1
    },
    getSecond(val) {
      this.list2 = this.datatest.l2[値]
    },
    getThird (値) {
 
      this.list3 = this.datatest.l3[値]
    },
    検索クリア() {
      コンソールログ(this.whereMap)
      this.whereMap = {};
      this.list2 = [];
      this.list3 = [];
    }
  }
}
</スクリプト>