Vue3 子组件获取 v-model 值，如何获取？

父组件代码

<el-form-item label="封面">
  <UploadImgCom v-model="form.imgs"></UploadImgCom>
</el-form-item>

const form = ref<ColumnModel>({});
columnServer.Ishow(id).then((res) => {
  form.value = res.data as ColumnModel;
});

其中 form.imgs 有值

子组件代码

<img v-if="imageUrl" :src="imageUrl" class="avatar" />

const emit = defineEmits(["update:modelValue"]);
const props = defineProps<{ modelValue: string | undefined }>();
const imageUrl = ref(props.modelValue);

问题：我在加载数据的时候，是异步加载，这里出现了，子组件里面，获取不到 form 的值。

注：感觉是我的 server 去异步请求接口，然后 form 没有更新到。因为我在编辑器，更新代码，然后项目自动重新加载，它又可以获取到参数。所以我在想是不是，异步赋值，子组件没有跟着更新的问题！

请问我要想子组件加载 v-model 里的值，我改怎么处理。

上面的方法可以在子主键额外添加一个watch 可以实现更新！

提问题补充

但是同样的代码，为什么我的下拉框就能实现自动选择，就是我的下拉框能正常获取到v-model的值，都在一个页面，form 都是用的同样的值

父组件:

vue:

<el-form-item label="上级栏目">
  <ColumnSidCom v-model="form.sid" placeholder="请选择栏目" :sid="0">/ColumnSidCom>
</el-form-item>

ts:

columnServer.Ishow(id).then((res) => {
  form.value = res.data as ColumnModel;
});

子组件：

vue:

<template>
  <el-select v-model="from" @change="change">
    <el-option
      v-for="item in column"
      :key="item.id"
      :label="item.title"
      :value="item.id"
    />
  </el-select>
</template>

ts:

import type { ColumnModel } from "@/model/column/ColumnModel";
import { ColumnServer } from "@/server/ColumnServer";
import { ref, defineEmits, defineProps } from "vue";
const props = defineProps<{ sid: number }>();
const emit = defineEmits(["update:modelValue"]);
const columnServer = new ColumnServer();
const from = ref();
const column = ref<ColumnModel[]>();
columnServer.getSid(props.sid).then((msg) => {
  column.value = msg.data as ColumnModel[];
});
const change = () => {
  emit("update:modelValue", from.value);
};