What does the v-model directive do?

v-model creates a two-way binding so a form input and a data property stay synchronized in both directions.

<input v-model="name" id="input">
<p>Hallo {{ name }}</p>

Two-way binding means:

1. Input changes → property updates
2. Property changes → input updates

When the user types in the input, name updates automatically, and any template using {{ name }} re-renders instantly.