Is it possible to add tags input to an AutoForm?

[wes-kay]

Cant seem to bind the input into the form, I can populate the input, but it's not setting the data

<!-- KeywordTagsInput.vue -->
<script setup lang="ts">
import { ref, watch } from "vue"
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from "@/components/ui/tags-input"

const props = defineProps<{ modelValue?: string[] }>() 
const emit = defineEmits(["update:modelValue"])

const localValue = ref(props.modelValue ?? [])

watch(localValue, (val) => {
  emit("update:modelValue", val)
})
</script>

<template>
  <TagsInput v-model="localValue">
    <TagsInputItem v-for="item in localValue" :key="item" :value="item">
      <TagsInputItemText />
      <TagsInputItemDelete />
    </TagsInputItem>
    <TagsInputInput placeholder="Add keywords..." />
  </TagsInput>
</template>

<!-- KeywordFormView -->
<script setup lang="ts">
import { h } from "vue"
import * as z from "zod"
import { AutoForm } from "@/components/ui/auto-form"
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/toast/use-toast"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card"
import KeywordTagsInput from "@/components/KeywordTagsInput"

const { toast } = useToast()

const schema = z.object({
  keywords: z.array(z.string()).min(1, { message: "Enter at least one keyword." }),
  country: z.string().min(2),
  email: z.string().email(),
})

const fieldConfig = {
  keywords: {
    label: "Keywords",
    component: KeywordTagsInput,
  },
  country: {
    label: "Country / Area",
    placeholder: "e.g., Canada, US, UK",
  },
  email: {
    label: "Email",
    inputProps: {
      type: "email",
      placeholder: "you@example.com",
    },
  },
}

function onSubmit(values: Record<string, any>) {
  console.log("Form submitted:", values)

  toast({
    title: "Form submitted",
    description: h(
      "pre",
      { class: "mt-2 w-[340px] rounded-md bg-slate-950 p-4 overflow-auto" },
      h("code", { class: "text-white text-sm" }, JSON.stringify(values, null, 2))
    ),
  })
}
</script>
<template>
  <div class="container mx-auto px-2 sm:px-4 py-2">
    <Card class="p-2 sm:p-4 w-full">
      <CardHeader>
        <CardTitle class="text-xl font-semibold">Keyword Intake Form</CardTitle>
        <CardDescription class="text-sm text-gray-500">
          Enter keywords, country/area, and your email to start the analysis.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <AutoForm
          class="space-y-6"
          :schema="schema"
          :field-config="fieldConfig"
          @submit="onSubmit"
        >
          <Button type="submit">Submit</Button>
        </AutoForm>
      </CardContent>
    </Card>
  </div>
</template>