当元素不再可见时,如何更改ref元素?

在我的一个组件中,我有一个窗体,它会根据单选按钮的值更改窗体。

我的组件看起来像这样:

<template>
  <div>
    <div>
      <label>
        <input
          class="radio"
          name="groupInput"
          type="radio"
          value="one"
          v-model="groupActive"
        />
        Group 1
      </label>
      <label>
        <input
          class="radio"
          name="groupInput"
          type="radio"
          value="two"
          v-model="groupActive"
        />
        Group 2
      </label>
    </div>
    <input v-if="groupActive === 'one'" type="text" ref="defaultInput" />
    <select v-else ref="defaultInput">
      <option value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
    </select>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const groupActive = ref("one");
const defaultInput = ref(null);

onMounted(() => {
  defaultInput.value.focus();
});
</script>

Here's a working example .

当安装部件时, defaultInput 专注。但当我更改单选按钮的值时 <input> 我关注的是不再可用,我想专注于新的。我怎样才能做到这一点?是否可以更新 ref 新的价值 <select> 然后专注于它?