关于vue3中在子组件上使用多个v-model，子组件中值正确传递但不生效的问题

直接上问题代码，父组件上：

    <!-- 新增抽屉 -->
    <AddDrawer 
      v-model:visible="drawerAdd" 
      v-model:="form"
      :title="title"
      :query-params="queryParams"
      :has-add-btn="hasAddBtn"
      :type-list="typeList"
      @get-table-list="getTableList"
    />

子组件中：
 

<el-drawer
    v-model="drawer"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="title"
  >
  <!-- {{ Object.prototype.toString(drawer) }}
  {{ form }} -->
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
    >
      <el-tab-pane
        label="基础信息"
        prop="basicInformation"
      />
    </el-tabs>
    <el-form
      ref="formRef"
      :model="form"
      label-position="left"
      label-width="130px"
      :rules="rules"
    >
      <el-form-item 
        prop="name"
        label="企业名称"
      >
        <!-- <DictSelect
            v-model:content="form.name"
            :list="dictData"
          /> -->
        <el-select
          v-model="form.name"
          placeholder="请选择企业"
          size="large"
        >
          <el-option
            v-for="item in dictData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="企业类型"
        prop="enterpriseType"
      >
        <el-select
          v-model="form.enterpriseType"
          placeholder="请输入企业类型"
        >
          <el-option
            v-for="item in typeList"
            :key="item.dictValue"
            :value="item.dictValue"
            :label="item.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="地址">
        <el-input
          v-model="form.enterpriseAddress"
          placeholder="请输入地址"
          maxlength="200"
          show-word-limit
          clearable
        />
      </el-form-item><el-form-item 
        prop="safetyManager"
        label="企业安全负责人"
      >
        <el-input
          v-model="form.safetyManager"
          placeholder="请输入企业安全负责人"
          maxlength="50"
          show-word-limit
          clearable
        />
      </el-form-item><el-form-item
        label="联系电话"
        prop="phoneNumber"
      >
        <el-input
          v-model="form.phoneNumber"
          placeholder="请输入联系电话"
          clearable
        />
      </el-form-item>
      <el-form-item 
        prop="idNumber"
        label="身份证号"
      >
        <el-input
          v-model="form.idNumber"
          placeholder="请输入身份证号"
          clearable
        />
      </el-form-item>
      <el-form-item label="面积(m³)">
        <el-input
          v-model="form.proportion"
          placeholder="请输入面积"
          clearable
        />
      </el-form-item><el-form-item label="从业人数">
        <el-input
          v-model="form.totalEmployees"
          placeholder="请输入从业人数"
          clearable
        />
      </el-form-item>
      <el-form-item 
        prop="riskLevel"
        label="风险等级"
      >
        <el-radio-group v-model="form.riskLevel">
          <el-radio value="A">
            A
          </el-radio>
          <el-radio value="B">
            B
          </el-radio>
          <el-radio value="C">
            C
          </el-radio>
          <el-radio value="D">
            D
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-divider />
      <div class="drawer-footer">
        <el-button @click="close">
          取 消
        </el-button>
        <!-- 这是保存的按钮 -->
        <el-button
          v-if="hasAddBtn"
          type="primary"
          @click="newlyAdded"
        >
          保 存
        </el-button>
        <!-- 这是修改的按钮 -->
        <el-button
          v-else
          type="primary"
          @click="modifyButton"
        >
          修 改
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup>
import { ref,toRefs,computed,getCurrentInstance, onMounted } from 'vue';
import { phoneValidate,idCardValidate } from '@/utils/numberValidate';
import {addEnterpriseInformation,modifyEnterpriseInformation} from '@/api/safeProduction/enterpriseManagement.js';
import {listMarket} from '@/api/localElement/marketSubject.js';
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  queryParams: {
    type: Object,
    default: () => {
      return {};
    }
  },
  hasAddBtn: {
    type: Boolean,
    default: null
  },
  typeList: {
    type: Object,
    default: () => {
      return {};
    }
  },
  form: {
    type: Object,
    default: () => {
      return {

      };
    }
  }
});
const emits = defineEmits(['update:visible','update:form','getTableList']);
const {form,queryParams,hasAddBtn} = toRefs(props);

const drawer = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits('update:visible', val);
  }
});

问题描述：在子组件中，抽屉在页面初始化加载时是默认是打开的，但是从父组件中传递过来的值是false，只有为true的时候才是打开的。

此处在页面中展示了值drawer的值

问题原因：在父组件上我使用v-model绑定了两个值，分别是drawerAdd和form，其中drawerAdd在绑定时设置了参数名为visible，form未设置，从而导致问题的发生。

解决方案：按规范，在子组件上绑定多个v-model需给每个v-model设置参数名。即：

   <AddDrawer 
      v-model:visible="drawerAdd" 
      v-model:form="form"
      :title="title"
      :query-params="queryParams"
      :has-add-btn="hasAddBtn"
      :type-list="typeList"
      @get-table-list="getTableList"
    />

思考：经过多次试验发现，drawer值虽然为false，但是通过类型检查Object.prototype.toString(drawer)发现，其本质为对象。所以在抽屉组件上v-model绑定的drawer其实是一个对象，恰巧说明了，虽然值为false但是为什么抽屉会打开的原因，至于值为什么是一个false，但是类型是一个对象的问题，目前暂未发现是何原因，有知道的小伙伴可以帮忙解答一下吗，感谢！