Registering auto-animate in nuxt 3 about auto-animate HOT 5 OPEN

<script setup lang="ts">
import autoAnimate from '@formkit/auto-animate'

    const ccform = ref()

    const formStyles = ref({
        outer: 'mb-5',
        label: 'block mb-1 font-bold text-xl text-gray-500',
        inner: 'w-full border-b border-gray-900 mb-1 overflow-hidden focus-within:border-ct-blue-500',
        input: 'w-full bg-light-50 sofia h-10 border-none focus:outline-none text-lg text-gray-700 placeholder-gray-400',
        message: 'text-xs text-red-500 font-light'
    })

    

    onMounted(() => {
        ccform.value.querySelectorAll(".formkit-outer").forEach(autoAnimate)
    })

</script>

<template>
    <div class=" " ref="ccform">
        <FormKit 
            type="form"
            id="contact"
            :actions="false"
            @submit="submitForm"
        >
            <FormKit
                type="text"
                label="Name"
                name="fullname"
                validation="required"
                :classes="formStyles"
            />
            <FormKit
                type="email"
                label="Email"
                name="email"
                validation="required|email"
                :classes="formStyles"
            />
            <FormKit
                type="tel"
                label="Phone number"
                :validation="[['required'], ['matches', /^[0-9]{3}[0-9]{4}[0-9]{4}$/]]"
                :validation-messages="{
                    matches: 'Phone number must be in the format xxx-xxxx-xxxx',
                }"
                :classes="formStyles"
            />
            <FormKit
                type="submit"
                label="Send"
                :classes="formStylesSubmit"
            />
        </FormKit>
    </div>
</template>