Vue.js异步数据加载下，如何避免select框value值提前渲染？

<code class="vue"><template>
  <el-select v-model="selectVal" @change="handleChange">
    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
export default {
  props: ['initialValue'], // 父组件传入的初始值
  emits: ['update:modelValue'], // 向父组件传递更新后的值
  data() {
    return {
      selectOptions: [],
      loading: true, // 添加loading状态
    };
  },
  computed: {
    selectVal: {
      get() {
        return this.loading ? undefined : this.initialValue; // 数据加载完成才渲染value
      },
      set(val) {
        this.$emit('update:modelValue', val);
      }
    },
  },
  created() {
    this.getOptions();
  },
  methods: {
    async getOptions() {
      this.loading = true; // 设置loading状态
      try {
        // 异步请求数据
        const response = await this.fetchData();
        this.selectOptions = response.data;
      } catch (error) {
        // 处理错误
        console.error('数据加载失败:', error);
      } finally {
        this.loading = false; // 数据加载完成
      }
    },
    async fetchData() {
      // 替换为你的实际数据请求
      // ...
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({ data: [{ value: 'Option1', label: 'Option 1' }, { value: 'Option2', label: 'Option 2' }] });
        }, 500);
      });
    },
    handleChange(value) {
      // 处理change事件，可以进行额外操作
    }
  },
};
</script></code>