Composable with reactive state in Vue - Step-by-Step Execution

Concept Flow - Composable with reactive state

Define reactive state inside composable

↓

Return reactive state and functions

↓

Import composable in component

↓

Use reactive state in component template

↓

Update state via composable functions

↓

Component re-renders with new state

This flow shows how a composable defines reactive state and functions, which a component imports and uses to reactively update its UI.

Execution Sample

Vue

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

Defines a composable that holds a reactive count and an increment function.

Execution Table

Step	Action	Reactive State (count.value)	Function Called	Component Render Output
1	Composable useCounter() called	0	none	count: 0
2	increment() called	1	increment	count: 1
3	increment() called	2	increment	count: 2
4	No more calls	2	none	count: 2

💡 No more function calls; reactive state remains at 2; component shows updated count.

Variable Tracker

Variable	Start	After 1	After 2	Final
count.value	0	1	2	2

Key Moments - 2 Insights

Why does the component update its display when count.value changes?

Because count is a reactive ref, Vue tracks its usage in the component and triggers re-render when count.value changes, as shown in execution_table steps 2 and 3.

What happens if we call increment() multiple times quickly?

Each call increases count.value by 1, and Vue batches updates to re-render efficiently, reflected in variable_tracker and execution_table rows 2 and 3.

Visual Quiz - 3 Questions

Look at the execution table, what is count.value after step 2?

A 1

B 0

C 2

D undefined

💡 Hint

Check the 'Reactive State (count.value)' column at step 2 in the execution_table.

At which step does the component first show count: 2?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Component Render Output' column in the execution_table.

If increment() was never called, what would the component display?

A count: 1

B count: 0

C count: undefined

D count: null

💡 Hint

Refer to step 1 in execution_table where no functions are called yet.

Concept Snapshot

Composable with reactive state:
- Use Vue's ref() to create reactive state inside composable.
- Return state and functions from composable.
- Import and use composable in component.
- Component auto-updates when reactive state changes.
- Enables clean, reusable logic with reactive data.

Full Transcript

This visual execution trace shows how a Vue composable manages reactive state. First, the composable defines a reactive variable 'count' using ref(0). It also defines an increment function that increases count.value by one. When the composable is used in a component, the component accesses count and increment. Calling increment updates count.value, which Vue tracks reactively. This triggers the component to re-render and display the updated count. The execution table shows each step: initial state zero, then increments to one and two, with the component output updating accordingly. The variable tracker confirms count.value changes over time. Key moments clarify why Vue updates the UI automatically and how multiple increments behave. The quiz tests understanding of state changes and rendering steps. This pattern helps keep logic reusable and reactive in Vue apps.