如何使用 Vue 3.js 重置选择标签？

问：

我有一个名为“SelectInput”的组件和一个与名为“limpiarCampos”的方法关联的按钮

<!-- ==========SELECT COMPONENT============= -->
<select-input id="ciudades" label="Ciudad" class="text-sm pb-1 lg:pr-3 w-full lg:w-1/2"
                            ref="selectInputComponentCiudad" v-model="form.search_ciudad">
    <option :value="null" :selected="form.search = null" />
    <option v-for="ciudad in ciudades" :key="ciudad.id" :value="ciudad.id" class="capitalize">
                                {{ ciudad.nombre_ciudad }}
     </option>
</select-input>
<!-- ==========RESET BUTTON============= -->
 <div class="py-3 text-right">
   <button class="btn-indigo" type="button" @click="limpiarCampos()">
        Limpiar
   </button>
</div>

我的目标是，当用户按下按钮时，变量“form.search_ciudad”（反应变量）的值被设置为“null”，并且选择标签被重置。所以我试了一下：

const limpiarCampos = async () => {
    form.search_ciudad = null
      }

但只有变量 'form.search_ciudad' 设置为 null;select 标记仍显示以前选择的选项。我试图通过将所选索引设置为 0 来解决这个问题，但现在我遇到了同步问题。目前，我有这个

const limpiarCampos = async () =
 form.search_ciudad = null
  await new Promise((resolve) => setTimeout(resolve, 1000));
 selectInputComponentCiudad.value.$refs.selecting.selectedIndex = 0
       }

有人可以帮我解决这个问题吗？非常感谢大家。