Using Form Field Child Component with an input slot doesn't communicate with form properly.

[richcoleman-alphatrust]

I'm trying to use a child component to hold all the formatting of the form field group and validation while having the actual input in the parent file via a <slot></slot> but it doesn't seem to be as easy as it was in Vee-Validate v3 or lower. Visuals and code below...

(I have a much more complex version of this in Vue 2 and Vee-Validate 3 but I've simplified what I'm trying to do below. I'm trying to update to Vue 3 so I have to update to Vee-Validate 4 and it's not obvious how I would do this now. )

Submitting the form will trigger the validation

But entering data seems to have no effect and it behaves like there's no data in the fields at all.

Login.vue

<script setup lang="ts">
    import { useForm } from 'vee-validate'
    import { ref } from 'vue'
    import FieldGroup from './FieldGroup.vue'

    interface Credentials {
        username: string | null
        password: string | null
    }

    const credentials = ref<Credentials>({ username: null, password: null })

    const { handleSubmit } = useForm<Credentials>()

    const login = handleSubmit((values) => {
        console.log('values', values)
    })
</script>

<template>
    <form @submit="login">
        <FieldGroup name="username" label="Username" rules="required">
            <input type="text" name="username" v-model="credentials.username" class="form-control" />
        </FieldGroup>

        <FieldGroup name="password" label="Password" rules="required">
            <input type="password" name="password" v-model="credentials.password" class="form-control" />
        </FieldGroup>

        <div>
            <button class="btn btn-primary" type="submit">Login</button>
        </div>
    </form>
</template>

FieldGroup.vue

<script setup lang="ts">
    import { useField } from 'vee-validate'

    const props = defineProps({
        label: String,
        name: { type: String, required: true },
        rules: [String, Object],
    })

    const { errorMessage } = useField(props.name, props.rules)
</script>

<template>
    <div class="form-group mb-3" :class="{ 'has-error': errorMessage }">
        <label :for="props.name">{{ label }}</label>
        <span v-if="errorMessage" class="error float-end text-danger">{{ errorMessage }}</span>
        <slot></slot>
    </div>
</template>