Vue - Vee Validate 4, validate the length of an array #submit - vuejs3

Question

I have some fields where the validation works fine and functionality where items get moved from an unselected array to a selected array. Im trying to validate the length of the selected array before submitting the form. It is required to select at least 1 item.
I'm trying to achieve the onSubmit() method is not fired when the "selected" array is empty. At the moment I'm trying to achieve this with vue's "watch()" method and vee-validates "validate()" method, but to no avail.
Thanks in advance!
I am using:
vue 3
vee-validate 4
Code
<template>
<Form #submit="onSubmit">
//some other fields where the validation works
//functionality that puts an array item from the unselected to the selected array
<Button>Submit</Button>
</Form>
</template>
<script setup>
import {ref, watch} from "vue/dist/vue";
import {validate, Form} from "vee-validate";
const onSubmit = () => {
//submit form if all fields are valid
}
const selected = ref([])
const unselected = ref([
{title: 'Bram janssen', id: 1, value: 1},
{title: 'Bert Bertsma', id: 2, value: 2},
{title: 'Kees Keesma', id: 3, value: 3},
{title: 'Jan Janssen', id: 4, value: 4},
{title: 'Pieter Pietersma', id: 5, value: 5},
{title: 'Lars Klaver', id: 6, value: 6},
])
watch(selected.value, () => {
validate(selected.value, {arrayLength: true})
});
</script>
//this rule lives in another file, confirmed to work
defineRule('arrayLength', (array: any) => {
if (array.length < 1) {
return 'Array is empty, add at lest 1 item';
}
return true;
});

Answer 1

I guess just not with a watch. You can use the validate method directly in your "add to selected". Working example: here
Code looks like this:
<template>
<form #submit="onSubmit">
<p>
<button
#click.prevent.stop="addToArray"
>
Add to Array
</button>
</p>
<p>Array Length: {{ myArray.length }} - array error: {{ arrayError }}</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
</template>
<script setup lang="ts">
import { useField, useForm } from 'vee-validate';
const { handleSubmit } = useForm();
const onSubmit = handleSubmit((values) => {
alert(JSON.stringify(values, null, 2));
});
var {
value: myArray,
errorMessage: arrayError,
validate,
} = useField('myArray', (value) =>
value.length > 0 ? true : 'Please add to the array'
);
myArray.value = [];
function addToArray(){
myArray.value.push('abc');
validate();
}
</script>