Vaildation

Form.vue

<template>
  <input v-model="formData.name" />
  <p v-if="!formStatus.name.valid">{{ formStatus.name.message }}</p>
</template>

<script setup lang="ts'>
const formData = reactive({
  name
})

/** Assume all valid by default */
const formStatus = ref<{ name: { valid: boolean, message?: string }>({
  name: { value: true }
})

watch(formData, async (newData) => {
  const serverValidated = await fetch("/validate, { method: "POST", formData: newData })
  formStatus.value = serverValidated /* could be { name: { valid: false, message: 'Too short' } } */
})

const formState = computed(() => {
  return {
    name: {
      value: formData.name  
    }
  }
})
</script>