Need help setting up a custom field's validation

[Drillan767]

Hello!

I'm trying to setup Vee Validate 4 with Vue 3 Datepicker, I feel like I'm close to have everything working, but something's missing.

For some context: the file I'm setting everything up contains two Datepickers, so I need to use useField() twice (with different variable names)

script setup (relevant part)

const fieldsProxy = computed({
    get: () => props.fields,
    set: value => emit('input', value),
})

// Setting minutes and seconds to 0
onMounted(() => {
    fieldsProxy.value.begin = dayjs().set('minute', 0).set('second', 0).toDate()
    fieldsProxy.value.end = dayjs().set('minute', 0).set('second', 0).toDate()
})

const {
    value: beginValue,
    errorMessage: beginError,
    handleBlur: beginBlur,
    handleChange: beginChange,
    meta: beginMeta,
} = useField('specific-begin', undefined, {
    initialValue: fieldsProxy.value.begin,
})

const {
    value: endValue,
    errorMessage: endError,
    handleBlur: endBlur,
    handleChange: endChange,
    meta: endMeta,
} = useField('specific-end', undefined, {
    initialValue: fieldsProxy.value.end,
})

defineRule('available', (value: string, [target]: [string]) => {
    const before = dayjs(target)
    const after = dayjs(value)

    console.log(value, target)

    if (after.isBefore(before))
        return 'End value should be after begin value'

  return true
})

template (relevant part)

<label class="label">
    <span class="label-text">Begin</span>
</label>

<VueDatePicker
    v-model="fieldsProxy.begin"
    locale="fr"
    :minutes-increment="30"
    select-text="OK"
    placeholder="Test"
    cancel-text="Annuler"
    format="dd/MM/yyyy HH:mm"
    :month-change-on-scroll="false"
    :value="beginValue"
>
    <template #dp-input="{ value }">
        <input
            type="text"
            :value="value"
            name="specific-begin"
            class="input input-bordered w-full"
            @input="beginChange"
            @blur="beginBlur"
        >
    </template>
</VueDatePicker>

<label class="label">
    <span class="label-text">End</span>
</label>
<VueDatePicker
    v-model="fieldsProxy.end"
    locale="fr"
    :minutes-increment="30"
    select-text="OK"
    placeholder="Test"
    cancel-text="Annuler"
    format="dd/MM/yyyy HH:mm"
    :month-change-on-scroll="false"
    :value="endValue"
>
    <template #dp-input="{ value }">
        <input
            type="text"
            :value="value"
            name="specific-end"
            class="input input-bordered w-full"
            rule="available:@specific-begin"
            @input="endChange"
            @blur="endBlur"
        >
    </template>
</VueDatePicker>

With this configuration, if I check the Vee Validate plugin in the Vue tab, both my fields are displayed, and I have the following as state:

initialValue: Tue Aug 08 2023 22:00:00 GMT+0200 (Central European Time)
currentValue: undefined
touched: true
dirty: true
valid: true

If I change both my initialValue to the same with toString(), initialValueandcurrentValue` show the date to string, but nothing updates when I change the value.

What am I missing? Thank you in advance