elementUI Form中 勾选框设置必选不提示问题

想让提交时勾选必选

开始这样写

<el-form-item prop="agree">
  <el-checkbox
    style="font-size: 12px"
    label="阅读并同意《服务协议》和《隐私声明》"
    v-model="ruleForm.agree"
  ></el-checkbox>
</el-form-item>

 	  ruleForm: {
        userName: '',
        passWord: '',
        agree: false,
      },
      rules: {
        agree: [
          { required: true, message: '请勾选同意协议', trigger: 'change' },
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },

不起作用，必须用elementUI Form文档里面的写法

	  ruleForm: {
        userName: '',
        passWord: '',
        agree: [], //1.修改成数组
      },
      rules: {
        agree: [ // 2.加一个type是数组
          { type: 'array', required: true, message: '请勾选同意协议', trigger: 'change' }, 
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },

就能正常提示了