Composables for reusable logic in Vue - Step-by-Step Execution

Concept Flow - Composables for reusable logic

Create composable function

↓

Define reactive state inside composable

↓

Return state and functions

↓

Import composable in component

↓

Use returned state and functions

↓

Component reacts to composable state changes

↓

Reusable logic shared across components

This flow shows how you create a composable function with reactive state and logic, then use it inside components to share behavior easily.

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 provides a reactive count and an increment function.

Execution Table

Step	Action	State Before	State After	Output/Effect
1	Call useCounter()	No count	count = 0	Composable returns count and increment
2	Component uses count.value	count = 0	count = 0	Component shows count as 0
3	Call increment()	count = 0	count = 1	count.value increments to 1
4	Component reacts to count change	count = 1	count = 1	UI updates to show count as 1
5	Call increment() again	count = 1	count = 2	count.value increments to 2
6	Component reacts to count change	count = 2	count = 2	UI updates to show count as 2
7	No more actions	count = 2	count = 2	Execution stops

💡 No more actions to perform, composable state stable

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
count.value	undefined	0	1	2	2

Key Moments - 2 Insights

Why does count.value update inside the component when increment() is called?

Because count is a reactive ref returned by the composable, when increment() changes count.value, Vue tracks this and updates the component automatically (see execution_table steps 3 and 4).

Can multiple components use the same composable and keep their own count?

Yes, each call to useCounter() creates a new reactive count ref, so each component has its own independent state (not shown in table but implied by composable pattern).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of count after increment() is called?

A 0

B undefined

C 1

D 2

💡 Hint

Check the 'State After' column at step 3 in execution_table

At which step does the component update its UI to show the new count value?

A Step 2

B Step 4

C Step 5

D Step 1

💡 Hint

Look for 'UI updates' in the Output/Effect column in execution_table

If we call increment() twice, what will count.value be after the second call?

A 2

B 0

C 1

D undefined

💡 Hint

See variable_tracker for count.value changes after steps 3 and 5

Concept Snapshot

Composable functions in Vue are reusable logic blocks.
They use reactive state like ref() inside.
Return state and functions to components.
Each component calling composable gets independent state.
Components react automatically to reactive changes.
Use composables to share logic cleanly.

Full Transcript

This visual trace shows how Vue composables work. First, you create a composable function that defines reactive state using ref(). It returns this state and any functions that change it. When a component calls this composable, it gets its own reactive state. Calling functions like increment() updates the reactive state. Vue detects these changes and updates the component's UI automatically. Each component using the composable has its own independent state. This pattern helps share logic easily and keeps components clean.