I am using async-validator for my validation because I am using element ui. Here is my form and my validation rules:

<el-form :model="ance" :rules="validationRules" ref="form">
                <el-form-item prop="files">
                  <files-selector v-model="ance.files" />
                </el-form-item>
              </el-form>

validationRules: function () {
      return {
        files: [
          {
            required: true,
            trigger: 'blur',
            message: 'Form required',
          },
        ],
      };
    },

files-selector is my child component and includes el-cascader inside:

<template>
  <div>
    <el-cascader
      v-model="files"
      :options="filesOptionsForCascader"
      placeholder="Files"
      filterable
      :filter-method="filterMethod"
      :props="{
        emitPath: false,
      }"
    />
  </div>
</template>

When I click the button it triggers the validation:

saveAnce() {
      this.$refs.form.validate((isValid) => {
        if (!isValid) {
          return;
        }
        //post request
      });
    },

But my problem is, I click the button without selecting anything from files-selector and it gives me the message Form required. After, I select from files-selector but the message is still being shown and even validation doesnt fail, I cannot get rid of this view.

after selection

What can I do to solve this? Should I add watcher to see if the file selector is not empty? Form example could validation without clicking button solve this? Any help would be appreciated.