iview 刷新无法显示已选中的select组件的值

Question

页面上有两个select组件，第一个的option是动态读取的，第二个select组件的option是根据第一个select组件选中的值去读取的，当我选中两个select组件后，再点击搜索按钮去搜索数据后刷新页面，第一个select组件能显示我选中的值，第二个却不能显示我选中的值，求解！
代码如下：
<template>

<div>
    一级分类：<Select
        v-model="class1id"
        style="width:180px;margin-left:10px;"
    >
      
        <Option
            v-for="item in class1List"
            :value="item.value"
            :key="item.value"
        >{{ item.label }}</Option>
    </Select>
    二级分类：<Select
        v-model="class2id"
        style="width:180px;margin-left:10px;"
    >
       
        <Option
            v-for="item in class2List"
            :value="item.value"
            :key="item.value"
        >{{ item.label }}</Option>
    </Select>

<Button

        type="info"
        style="margin-left:10px;"
        @click="search"
    >搜索</Button>

</div>
</template>
<script lang="ts">
import { CreateElement } from "vue";
import { Vue, Component, Watch } from "vue-property-decorator";
import Axios, { AxiosResponse, AxiosError } from "axios";
import VueRouter from "vue-router";

import linksService from "../../ts/service/links";
import linksclass2Service from "../../ts/service/linksclass2";
import linksclass1Service from "../../ts/service/linksclass1";

@Component
export default class linkManager extends Vue {
class1id = "";
class2id = "";
class2List:any=[]
class1List:any=[]
search() {

console.log("search this.class2List:", this.class2List);
let url =
 
  "localhost:8080/webapp/admin/linksManager?flag=linksManager" +
  "&pi=1&keyWord=" +
  this.keyWord +
  "&class1id=" +
  this.class1id +
  "&class2id=" +
  this.class2id;
this.$router.replace(url);

}
@Watch("class1id")
onclass1id() {

if (this.class1id != "") {
  this.class2id = "";
  this.getInfoByClass1id(this.class1id);
}

}
mounted() {

(async () => {
 
  await this.getClass1List();
  
  this.refreshPage();
})();

}
refreshPage() {

console.log("refreshPage...");

this.class1id =
  this.$route.query.class1id == undefined ||
  this.$route.query.class1id == "undefined"
    ? ""
    : this.$route.query.class1id.toString();
 this.class2id =
   this.$route.query.class2id == undefined ||
   this.$route.query.class2id == "undefined"
     ? ""
     : this.$route.query.class2id.toString();

}
async getClass1List(){}
async getInfoByClass1id(class1id:string){

}
}
</script>