Обычно для обработки данных форм используются стандартные элементы форм HTML (input text, checkbox, radio, button, etc) с директивой v-model, которая устанавливает двухстороннее связывание между элементом формы и некоторой переменной. Таким образом в переменной всегда хранится такое же значение, как и в поле ввода, например.

Поля ввода (input text, password, number):

=====================

<input v-model="message" placeholder="отредактируй меня">
<p>Введённое сообщение: {{ message }}</p>

В данном случае содержимое поля ввода будет отображено в параграфе под ним через интерполяцию переменной message.

Многострочные поля ввода (textarea):

===================================

<span>Введённое многострочное сообщение:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="введите несколько строчек"></textarea>

Нужно иметь ввиду, что хоть тег textarea и является парным (имеет открывающий и закрывающий тег), всё равно нужно использовать директиву v-model. Нельзя просто взять и интерполировать переменную внутри тега, это работать не будет:

<textarea>{{ message }}</textarea>

Чекбоксы с привязкой к булевому типу:

====================================

В данном примере чекбокс привязан к булевой переменной, которая принимает значение true, если чекбокс отмечен, и значение false -- в противном случае.

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Чекбоксы с привязкой к массиву:

==============================

В данном примере несколько чекбоксов привязаны через v-model к одной и той же переменной, которая является массивом. В данном случае Vue будет добавлять в массив значение, если соответствующий чекбокс отмечен, и удалять -- если соответствующий чекбокс не отмечен.

<div id="example-3" class="demo">
<input type="checkbox" id="jack" value="Джек" v-model="checkedNames">
<label for="jack">Джек</label>
<input type="checkbox" id="john" value="Джон" v-model="checkedNames">
<label for="john">Джон</label>
<input type="checkbox" id="mike" value="Майк" v-model="checkedNames">
<label for="mike">Майк</label>
<br>
<span>Отмеченные имена: {{ checkedNames }}</span>
</div>

new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})

Переключатели (radio buttons):

=============================

Vue понимает, что radio относятся к одной группе, если они привязаны через v-model к одной и той же переменной.

<input type="radio" id="one" value="Один" v-model="picked">
<label for="one">Один</label>
<br>
<input type="radio" id="two" value="Два" v-model="picked">
<label for="two">Два</label>
<br>
<span>Выбрано: {{ picked }}</span>

Выпадающие списки:

==================

<select v-model="selected">
<option disabled value="">Выберите один из вариантов</option>
<option>А</option>
<option>Б</option>
<option>В</option>
</select>
<span>Выбрано: {{ selected }}</span>

new Vue({
el: '...',
data: {
selected: ''
}
})

Выпадающие списки с множественным выбором (привязка к массиву):

==============================================================

<select v-model="selected" multiple>
<option>А</option>
<option>Б</option>
<option>В</option>
</select>
<br>
<span>Выбрано: {{ selected }}</span>