Summary
This chapter explains how to use a ref function to create reactive data whose value updates via a `.value` property, automatically triggering UI updates whenever the data changes.

General domain of usage
Interactive web user interfaces


In Vue, data becomes reactive when you use the `ref()` function. Reactive data means that when the value changes, the UI updates automatically.

To create reactive data, import `ref` and define a variable inside the `<script setup>` section.

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

const count = ref(0);
</script>

<template>
  <p>{{ count }}</p>
</template>
```

The value inside `ref()` is wrapped, so to update it in JavaScript, you use `.value`.

```js 
// JS
count.value = count.value + 1;
```

When the value changes, Vue automatically updates the UI.

Example with a button:

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

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <p>{{ count }}</p>
  <button @click="increment">Increase</button>
</template>
```

Each time the button is clicked, the value updates and the UI re-renders.

Reactive data is the foundation of Vue. It allows you to build interfaces that respond automatically to changes in your application state.


How do you update a value created with `ref()` in Vue?

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.

Working with Reactive Data (ref)