Form field keys conflict with form object APIs

[LucaPuddu]

Version:

• @inertiajs/vue3 version: 2.0.0

Describe the problem:

Specific field names cause undefined behavior.
There is a number of keys that should not be used as field names, progress being one of those, as they are already exposed as properties of the form object.

Other than the default field value not working properly unless the form is reset, it's possible that the field could be overwritten altogether when the form is being submitted.

Steps to reproduce:

const form = useForm({
  progress: 0,
});

console.log(form.progress); // null, but it should be 0

form.reset();

console.log(form.progress); // 0

Possibile solutions

Honestly I can't think of a way to change the API without adding breaking changes. The most logical way would be to group the fields under a separate object, something like form.data.progress for your field and form.progress for the already available progress event.

At minimum, the initialization should throw an error when certain "reserved" keys are being used as fields. Any other idea?