Sharing composables across components in Vue - Step-by-Step Execution

Concept Flow - Sharing composables across components

Create composable function

↓

Export composable

↓

Import composable in Component A

↓

Use composable in Component A setup

↓

Import composable in Component B

↓

Use composable in Component B setup

↓

Components share reactive state or logic

↓

UI updates based on shared composable

This flow shows how a composable function is created once, then imported and used in multiple Vue components to share reactive logic or state.

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 to share across components.

Execution Table

Step	Action	Composable State	Component A State	Component B State	Output/Effect
1	Import useCounter in Component A	count=0	count=0	-	No UI change yet
2	Call useCounter() in Component A setup	count=0	count=0	-	Component A shows count 0
3	Import useCounter in Component B	count=0	count=0	count=0	No UI change yet
4	Call useCounter() in Component B setup	count=0	count=0	count=0	Component B shows count 0
5	Component A calls increment()	count=0 (separate)	count=1	count=0	Component A updates to 1, B stays 0
6	Component B calls increment()	count=0 (separate)	count=1	count=1	Component B updates to 1, A stays 1
7	Components have independent states	count separate per call	count=1	count=1	UI reflects independent counts
8	Modify composable to share state (singleton pattern)	count=0 shared	count=0	count=0	Both components start at 0 shared
9	Component A calls increment() on shared state	count=1 shared	count=1	count=1	Both components update to 1
10	Component B calls increment() on shared state	count=2 shared	count=2	count=2	Both components update to 2
11	End	-	-	-	Shared state updates both components synchronously

💡 Execution stops after showing both independent and shared state usage in composables.

Variable Tracker

Variable	Start	After Step 2	After Step 5	After Step 6	After Step 9	After Step 10	Final
Component A count	-	0	1	1	1	2	2
Component B count	-	-	0	1	1	2	2
Composable count (independent)	0	0	0	0	-	-	-
Composable count (shared)	0	-	-	-	1	2	2

Key Moments - 3 Insights

Why do Component A and Component B have different counts after calling increment() when using the composable normally?

Because each call to the composable function creates a new independent reactive state, so increments affect only that component's count (see execution_table rows 5 and 6).

How can we make the composable share state between components?

By defining the reactive state outside the composable function so it acts as a singleton shared across imports (see execution_table rows 8-10).

What happens to the UI when the shared state increments in one component?

Both components update their displayed count because they reference the same reactive state (see execution_table rows 9 and 10).

Visual Quiz - 3 Questions

Look at the execution_table at step 5. What is Component B's count value?

A 1

B 0

C -

D 2

💡 Hint

Check the 'Component B State' column at step 5 in the execution_table.

At which step do both components start sharing the same count state?

A Step 8

B Step 2

C Step 6

D Step 10

💡 Hint

Look for when the composable count is marked as 'shared' in the execution_table.

If the composable state is shared, what will Component A's count be after Component B calls increment() at step 10?

A 1

B 0

C 2

D Does not change

💡 Hint

Refer to the 'Component A State' column at step 10 in the execution_table.

Concept Snapshot

Sharing composables across components:
- Create composable function returning reactive state and methods.
- Import and call composable in multiple components.
- Each call creates independent state by default.
- To share state, define reactive variables outside the function.
- Shared state updates reflect in all components using it.

Full Transcript

This visual execution shows how Vue composables can be shared across components. First, a composable function is created that returns a reactive count and an increment method. When each component calls this composable, it gets its own independent reactive state, so increments affect only that component. This is shown in steps 1 to 7. Then, by moving the reactive state outside the composable function, the state becomes shared (singleton). Steps 8 to 11 show that when one component increments the count, both components see the updated value. This teaches how to share logic and state using composables in Vue.