el-form v-if控制表单显示隐藏 验证规则失效

一个组件中有多个form表单 通过v-if 控制显示隐藏 会导致表单校验失效 只需要在每个表单组件加上key即可

        <div v-if="isCard">
          <h3>您的账号还没有进行身份认证，请先认证!</h3>
          <p>如果以下显示的姓名与您身份证上面的姓名不完全一致，请联系运营组做认证处理</p>
          <el-form :model="form" key="form" ref="form" :rules="rules" label-width="120px" :inline="false" size="small">
            <el-form-item label="您的姓名：">
            <span>疾风</span>
            </el-form-item>
            <el-form-item label="身份证原件正面照:">
            </el-form-item>
            <el-form-item label="身份证原件正面照图片:">
                <el-image style="width:100px" @click="deleteImg" v-if="imageInfo.url" :src="imageInfo.url" fit="fill" :lazy="true"></el-image>
            </el-form-item>
            <el-form-item label="您的身份证号：" prop="idCradNo">
              <el-input v-model="form.idCradNo" placeholder="" size="small" clearable ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
         <h3>您的账号还没有进行手机号认证，请先认证!</h3>
         <el-form :model="mobile" ref="mobilePhone" key="mobile" :rules="mobileRules" label-width="120px" :inline="false" size="small">
            <el-form-item label="您的手机号：" prop="phone">
              <div style="display:flex">
                <el-input v-model="mobile.phone" placeholder="" size="small" clearable ></el-input>
                <el-button type="primary" size="mini" @click="getCode" :disabled="time!='获取验证码'">{{time}}</el-button>
              </div>
            </el-form-item>
            <el-form-item label="请输入验证码" prop="mobile">
              <el-input v-model="mobile.mobile" placeholder="" size="small" clearable ></el-input>
            </el-form-item>
          </el-form>
        </div>