Infinite targets of custom rule is not working

Question

js

VeeValidate.Validator.extend('requireWithoutAll', {
    validate: (value, [ ...target ]) => {
    return value && _.compact(target).length;
  },
  getMessage: (field, [...target]) => 'The ${field} is required when none of ${target} are present.'
}, {
    hasTarget: true
});

vue

                        <ValidationProvider name="name1" vid="ref1">
                            <el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 1">                                
                                <el-checkbox v-model="is_model_1">Yes</el-checkbox>
                            </el-form-item>    
                        </ValidationProvider>    
                        <ValidationProvider name="name2" vid="ref2">    
                            <el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 2">                                
                                <el-checkbox v-model="is_model_2">Yes</el-checkbox>
                            </el-form-item>    
                        </ValidationProvider>    
                        <ValidationProvider :rules="'requireWithoutAll:ref1,ref2'" name="name3" vid="ref3">    
                            <el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 3">                                
                                    <el-checkbox v-model="is_model_3">Yes</el-checkbox>
                            </el-form-item>    
                        </ValidationProvider>

Expected Result When ref1 & ref2 is not selecting, there is error generated on ref3.

Actual Result Error doesn't generate.

Answer 1

The format for specifying the targets is rules="requireWithoutAll:@ref1,@ref2" not rules="requireWithoutAll:ref1,ref2".

See a working example here: https://codesandbox.io/s/codesandbox-forked-u0s3g?file=/src/Demo.vue

Relevant code:

  <ValidationProvider
    rules="requireWithoutAll:@ref1,@ref2"
    vid="ref3"
    v-slot="{ errors }"
    tag="div"
  >
     <!-- your checkbox UI here -->
  </ValidationProvider>