Estoy usando async-validator para mi validación porque estoy usando el elemento ui. Aquí está mi formulario y mis reglas de validación:

 <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',
 },
 ],
 };
 },

El selector de archivos es mi componente secundario e incluye el-cascader dentro:

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

Cuando hago clic en el botón, se activa la validación:

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

Pero mi problema es que hago clic en el botón sin seleccionar nada del selector de archivos y aparece el mensaje Formulario requerido. Después, selecciono del selector de archivos, pero el mensaje aún se muestra e incluso la validación no falla, no puedo deshacerme de esta vue.

después de la selección

¿Qué puedo hacer para solucionar esto? ¿Debo agregar un observador para ver si el selector de archivos no está vacío? ¿El ejemplo de formulario podría la validación sin hacer clic en el botón resolver esto? Cualquier ayuda sería apreciada.