[Vuejs]-How to access the name of a ref object from a array in Vue.js 3 / Typescript

To use forms you can use the reactive() function, something like this:

const form = reactive({
    surname: "",
    name: "",
    company: "",
    phone: "",
    email: "",
    msg: "",
});

And you don’t need to create a FormData() instance. You can pass directly the reactive form to the ep, something like this:

const response = await axios.post(apiEndpoint, form, {
    headers: {
      "Content-Type": "application/json",
    },
});

console.log(response)

If you want the v-model support for reactive() function, it’s as simple as doing this in your input:

<input v-model="form.name" />

Extra comments

If you want type the object, you can do this:

const form = reactive<Interface>({
    surname: "",
    name: "",
    ...
});