Всем привет. есть компонент с инпутом. этот компонент я проганяю

массивом и заполняю данными с этого массива. вопрос, как мне при отправке формы, вытянуть определенное поле и записать его в нужное место? сейчас я сделал так
вот компонент, который я вывожу в зависимости от заданного массива:
.wrapper.flex.flex-col.mb-3
label.wrapper__label.mb-1.text-sm.font-bold {{ title }}
input.wrapper__field(
:name="name"
:type="type"
@input="updateValue($event.target.value)"
:placeholder="placeholder"
:required="required"
class="hover:shadow-md"
).mb-1.outline-none.h-8.px-2.text-sm.shadow.rounded
span.wrapper__message.text-xs(v-if="message.length > 0" :class="'text-' + messageType") {{ message }}
сам массив:
fields: [
{
name: 'username',
placeholder: 'Логин',
type: 'text',
title: 'Логин',
message: '',
value: '',
messageType: '',
required: true
},
{
name: 'password',
placeholder: 'Пароль',
type: 'password',
title: 'Пароль',
message: '',
value: '',
messageType: '',
required: true
}
]
метод отправки формы:
submitLogin () {
const form = {
username: '',
password: ''
}
this.fields.forEach((field) => {
if (field.name === 'username') {
form.username = field.value
}
if (field.name === 'password') {
form.password = field.value
}
})
console.info(form)
}
мне кажется мой вариант получения определенного поля есть не очень правильным, и хотел бы совет,, как лучше его доставать

v-model ?