v-model is a Vue directive (a custom built-in Vue HTML attribute) that allows us to create a two-way binding on the form's input, textarea, and select elements. You can bind a form input with the Vue data so that the data can be updated when the users interact with the input field. v-model will always skip the initial value you set on the form elements but treats the Vue data as the source of truth. So you should declare the initial value on the Vue side, inside the data option or function.
v-model will pick the appropriate way to update the element based on the input type, which means that if you use it on the form input with type="text", it will use value as the property and input as the event to perform the two-way binding for you. Let's look at what falls under this directive in the coming sections.
Using v-model in text and textarea elements
Remember the two-way binding that we implemented with v-model to create custom input components in...