Каким способом можно сделать автосоздание переменных для v-model?

Question

[Kotaro Hiba]

Недавно сталкивался с поддержкой проекта который имеет просто огромное кол-во форм, и поймал себя на мысли, что код довольно одинаковый и отличаются только переменные которые мы отслеживаем через v-model и url для отправки.
Подумал для всего этого написать общий миксин, что и пытаюсь сделать сейчас. С написанием общих методов проблем не возникло, но застрял на одном моменте у каждой формы разные имена инпутов, и каждый раз забивать 10-15 строк в data не хочется.
Может быть есть какой то способ узнать какие v-model прописаны в компоненте и добавить их в data автоматически.
к примеру

<tamplate>
      <input type="text" v-model="form.user">
      <input type="password" v-model="form.password">
    </tamplate>

В дата на выходе будет

{
form: {
  user: ''
  password: ''
}
}

С миксинами познакомился не так давно, возможно в них можно передавать аргументы, но я в доке ничего подобного не нашел

P.S чисто в теории можно забить и не создавать в data переменную, vue сам ее сделает как только пользователь начнет заполнять поле, но мне кажется есть вариант сломать бек если объект будет не полный, но это не точно :), я слаб в этом вопросе

Answer 1

[Алекс Глебов]

Можно не хранить значения полей в data, если они нужны только для отправки.

<form @submit.prevent='onSubmit'>
   <input type="text" name="user">
   <input type="password" name="password">
   <button type='submit'>Отправить</button>
</form>

async onSubmit($event) {
   const fd = new FormData($event.target); 
   const response = await this.$axios.post('api/form', fd);
}

Answer 2

[0xD34F]

mounted() {
  this.$el.querySelectorAll('input').forEach(n => n.dispatchEvent(new Event('input')));
},

jsfiddle.net/whrgboxs