vue项目多层数据结构导致表单校验失效（提示输入内容不能为空）

vue项目多层数据结构导致表单校验失效（提示输入内容不能为空）
prop需要多级

                  <td class="column">
                    <font color="red">*</font>教材名称
                  </td>
                  <td
                    class="column"
                    colspan="6"
                  >
                    <el-form-item prop="manuscriptDetailedDTO.textbookName">
                      <el-input
                        class="input1"
                        v-model="ruleForm.manuscriptDetailedDTO.textbookName"
                      />
                    </el-form-item>
                  </td>

自定义验证规则：

data() {
    var validatePhoneTwo = (rule, value, callback) => {
      const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
      if (value == '' || value == undefined || value == null) {
        callback();
      } else {
        if ((!reg.test(value)) && value != '') {
          callback(new Error('请输入正确的电话号码或者固话号码'));
        } else {
          callback();
        }
      }
    };

绑定验证规则：

rules: {
 "manuscriptDetailedDTO.chiefStaffOfficerPhone": [
          {
            required: true,
            message: "请填写电话",
            trigger: "blur",
          },
          { validator: validatePhoneTwo, trigger: 'blur' }
        ],
}