尽管选项正在更改，但下拉列表所选值未更新

Question

我有两个下拉菜单。第一个下拉菜单选择，确定第二个下拉菜单的值列表。 每当我更改第一个下拉列表值时，第二个下拉列表中的选项都会更改，但所选值仍会显示。 我试图添加一个更改侦听器并设置第二个下拉列表的值。它会更改第二个下拉菜单的值，但仍显示旧的下拉菜单。

第一个下拉列表：

<select class="ui fluid search selection dropdown" v-model="$store.first_dd" v-on:change="reset_second">
        <option v-for="(brand,key) in bst" :key="brand" v-bind:value="key">
                {{key}}
        </option>
</select>

第二个下拉列表：

<select class="ui fluid search selection dropdown size-row" v-model="$store.state.second_dd">
        <option value=""></option>
        <option v-for="(size, key) in bst[this.$store.state.first_dd][0]" :key="size" v-bind:value="key" >
                {{key}}
        </option>
</select>

reset_second方法：

reset_second(){
  this.$store.commit('change_second_dd', '');
  console.log("second_dd: ", this.$store.state.second_dd)

}

我的方法成功清空了第二个下拉列表的值。但是我仍然看到在ui上选择了旧值。为什么会这样？