async-validator doesnt work in child component

I have a form which includes cascader from element ui. But el-cascader is in child component. So here is my parent component:

<el-form :model="file" :rules="rules" ref="form">
    <el-form-item prop="select">
      <selector v-model="file.select" />
    </el-form-item>
  </el-form>

  rules: function () {
    return {
      select: [
        {
          type: 'object',
          trigger: 'change',
          message: 'form required',
        },
        {
          validator(rule, value) {
            return new Promise((resolve, reject) => {
              console.log(value);
              if (value.length > 0) {
                return reject('form required');
              }

              return resolve();
            });
          },
        },
      ],
    };
  },

is my child component and includes el-cascader inside.

<el-cascader
      v-model="file"
      :options="fileOptionsForCascader"
      placeholder="File"
      filterable
      :filter-method="filterMethod"
      :props="{
        emitPath: false,
      }"
    />

So my validation is wrong. At very first time, when I select the file, the value comes empty (in console.log) and validation fails. If I select it again, then validation is successful. So I wonder why very first time, the value comes emoty and what can I do to solve it?