feat: use resolveDynamicComponent instead

packages/vee-validate/src/ErrorMessage.ts

@@ -1,4 +1,4 @@
-import { inject, h, defineComponent, computed } from 'vue';
+import { inject, h, defineComponent, computed, resolveDynamicComponent } from 'vue';
 import { FormErrorsSymbol } from './symbols';
 import { normalizeChildren } from './utils';
 
@@ -24,7 +24,7 @@ export const ErrorMessage = defineComponent({
         message: message.value,
       });
 
-      const tag = props.as;
+      const tag = (props.as ? resolveDynamicComponent(props.as) : props.as) as string;
       const attrs = {
         role: 'alert',
         ...ctx.attrs,

packages/vee-validate/src/Field.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent, nextTick, toRef, SetupContext, resolveComponent } from 'vue';
+import { h, defineComponent, nextTick, toRef, SetupContext, resolveDynamicComponent } from 'vue';
 import { getConfig } from './config';
 import { useField } from './useField';
 import { normalizeChildren, hasCheckedAttr, isFileInput } from './utils';
@@ -143,7 +143,7 @@ export const Field = defineComponent({
     };
 
     return () => {
-      const tag = resolveComponent(resolveTag(props, ctx));
+      const tag = resolveDynamicComponent(resolveTag(props, ctx)) as string;
       const slotProps = makeSlotProps();
 
       // Sync the model value with the inner field value if they mismatch

packages/vee-validate/src/Form.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent, toRef } from 'vue';
+import { h, defineComponent, toRef, resolveDynamicComponent } from 'vue';
 import { useForm } from './useForm';
 import { SubmissionHandler } from './types';
 import { normalizeChildren } from './utils';
@@ -126,7 +126,8 @@ export const Form = defineComponent({
           : {};
 
       return h(
-        props.as,
+        // avoid resolving the form component as itself
+        props.as === 'form' ? props.as : (resolveDynamicComponent(props.as) as string),
         {
           ...formAttrs,
           ...ctx.attrs,