Checkboxes group with Nuxtjs3, vee-validate4 and slot{field, error}

[leccyril]

Hello,

i try to write a from with vee-validate4 and nuxtjs3, i use slot fields, i try to add a checkbox group with a all (will check all),
How to process it ? we have some examples with one checkbox but not with group here my form (all fields are working except checkboxes)

	<Form @submit="submit" :validation-schema="schema" v-slot="{ field, errors }">
						<div class="form-group">
							<Field type="text" name="firstName" class="form-control" placeholder="First Name" v-bind="field"/>
							<ErrorMessage name="firstName" class="validation-alert"/>
						</div>
						<div class="form-group">
							<Field type="text" name="lastName" class="form-control" placeholder="Last Name" v-bind="field"/>
							<ErrorMessage name="lastName" class="validation-alert"/>
						</div>
						<div class="form-group">
							<Field type="text" name="email" class="form-control" placeholder="Email" v-bind="field"/>
							<ErrorMessage name="email" class="validation-alert"/>
						</div>
						<div class="form-group">
							<Field type="text" name="mobilePhone" class="form-control" placeholder="Mobile phone number" v-bind="field"/>
							<ErrorMessage name="mobilePhone" class="validation-alert"/>
						</div>
						<div class="form-group">
							<Field type="text" name="company" class="form-control" placeholder="Company" v-bind="field"/>
							<ErrorMessage name="company" class="validation-alert"/>
						</div>

						<div class="form-group mb-4">
							<Field type="text" name="bot" class="form-control" v-bind="field" value=""/>
							<ErrorMessage name="bot" class="validation-alert"/>
						</div>
						<div class="form-group mb-4">
							<Field v-slot="{ field }" name="aerospace" type="checkbox">
								<label>
									<input type="checkbox" name="aerospace" v-bind="field"/>
									Aerospace
								</label>
							</Field>
							<Field v-slot="{ field }" name="oem" type="checkbox">
								<label>
									<input type="checkbox" name="oem" v-bind="field"/>
									Oem
								</label>
							</Field>
							<Field v-slot="{ field }" name="industries" type="checkbox">
								<label>
									<input type="checkbox" name="industries" v-bind="field"/>
									Industries
								</label>
							</Field>
							<Field v-slot="{ field }" name="marine" type="checkbox" >
								<label>
									<input type="checkbox" name="marine" v-bind="field" />
									Marine
								</label>
							</Field>
							<Field v-slot="{ field }" name="all" type="checkbox" >
								<label>
									<input type="checkbox" name="all" v-bind="field" />
									Marine
								</label>
							</Field>
						</div>
						<div class="top alert alert-success" v-if="successMessage.length>0">
							<span>{{ success }}</span>
						</div>
						<div class="top alert alert-danger" v-if="errorMessage.length>0">
							<span>{{ errorMessage }}</span>
						</div>
						<button type="submit" class="btn btn-dark co-send-btn">Subscribe</button>
					</Form>

and script part

<script lang="ts" setup>
import {Form, Field, ErrorMessage} from "vee-validate";
import * as Yup from "yup";

const successMessage = ref(new String());
const errorMessage = ref(new String());

const schema = Yup.object().shape({
		email: Yup.string().required("Email is mandatory.").email("The email entered doesn’t seem right, please try again."),
		firstName: Yup.string().required("First Name is mandatory."),
		lastName: Yup.string().required("First Name is mandatory."),
		company: Yup.string().required("Company is mandatory."),
		mobilePhone: Yup.string().nullable().notRequired().when("mobilePhone", {
			is: (value: string | any[]) => value?.length,
			then: (rule) => rule.matches(/^[0-9]+$/, "Invalid phone number!").min(9, "Phone number must be at least 9 digits!"),
		}),
	},
	[
		// Add Cyclic deps here because when require itself
		["mobilePhone", "mobilePhone"],
	]);


async function submit(values: any) {
	console.debug('submit newsletter');
	console.debug(values);
	await useFetch("/api/newsletter", {
		method: "POST", body: values,
		onResponse({request, response, options}) {
			// Process the response data
			return response._data
			if (response._data.status === 201) {
				successMessage.value = "";
				errorMessage.value = "You have successfully subscribed to our newsletter and will receive further emails from us with the latest updates. Thank you!";
			}
		},
		onResponseError({request, response, options}) {
			console.debug(response);
			if (response.status === 409) {
				successMessage.value = "";
				errorMessage.value = "Youre already registered or something's wrong";
			} else if (response.status === 400) {
				successMessage.value = "";
				errorMessage.value = "There may be an issue with our server. Please try again later, or send an email to wheels@enata.com";
			} else {
				successMessage.value = "";
				errorMessage.value = "Sorry we couldn’t send the message, there may be an issue with our server. Please try again later, or send an email to wheels@enata.com";
			}
		}
	})
}
</script>

Any ide ? sample ?