Summary  
This chapter covers two-way data binding using the v-model directive to automatically synchronize reactive data properties with input fields.  

General domain of usage  
Form input handling



Vue allows you to connect input fields directly to reactive data using the `v-model` directive. This creates a two-way binding between the input and the data.

```vue 
<script setup>
import { ref } from "vue";

const name = ref("");
</script>

<template>
  <input v-model="name" placeholder="Enter your name" />
  <p>{{ name }}</p>
</template>
```

When the user types in the input field, the value of `name` updates automatically. When the value changes in JavaScript, the input field also updates.

This two-way connection keeps the UI and data in sync without manual event handling.

`v-model` is commonly used in forms to collect and manage user input.


Learn how to build dynamic interfaces using Vue.js and modern JavaScript patterns. Render data, handle user interactions, structure components, and manage state in a clear and scalable way. Apply core Vue concepts to create a complete application with reactive data, reusable components, and interactive UI.

Two-Way Binding with v-model