Add initialization callback to form helper in Vue adapters

[reinink]

Right now there is no easy way to reinitialize a form using the form helper without providing all the data a second time. This creates unnecessary boilerplate in situations where a simple form.reset() isn't enough because you want to update the values based on props that may have changed. For example:

Before (option 1):

// MyDialog.vue

const props = defineProps({
  company_id: Number,
})

const open = ref(false)
const form = useForm({
  first_name: '',
  last_name: '',
  email: '',
  role: 'User',
  company_id: props.company_id,
})

function open() {
  form.first_name = ''
  form.last_name = ''
  form.email = ''
  form.role = 'User'
  form.company_id = props.company_id
  open.value = true
}

Before (option 2):

// MyDialog.vue

const props = defineProps({
  company_id: Number,
})

const open = ref(false)
const form = useForm(getFormData())

function getFormData() {
   return {
    first_name: '',
    last_name: '',
    email: '',
    role: 'User',
    company_id: props.company_id,
  }
}

function open() {
  Object.assign(form, getFormData())
  open.value = true
}

This PR solves this problem by adding an new optional initialization callback to the form helper. This function is automatically called when resetting the form, ensuring that the latest component state (props) is used.

// MyDialog.vue

const props = defineProps({
  company_id: Number,
})

const open = ref(false)

const form = useForm(() => ({
  first_name: '',
  last_name: '',
  email: '',
  role: 'User',
  company_id: props.company_id,
}))

function open() {
  form.reset()
  open.value = true
}

[Tofandel]

useForm() without any argument now throws an error because it tries to call data which is undefined, but it was a valid call before (in fact it's used widely in laravel)

It should be like this

typeof data === 'function' ? cloneDeep(data()) :  cloneDeep(data)

[ragulka]

Note that this is a breaking change: previously, it was possible to pass in a reactive object like this:

const product = reactive({ name: '' });

const form = useForm({ product });

This way, product.name and form.product.name would always be in sync.

However, this no longer works, as data is now deep-cloned twice before spreading into the form object.

[thomasmokuaomweri2011]

@reinink I recently ran into this breaking change while trying to keep a reactive object in sync with the form object. Has there been a proper graceful fix or we may have to find alternative approaches?