Sharing composables across components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does a shared composable maintain state across components?

Consider a composable that returns a ref counter. If two components use this composable, what will happen to the counter state?

Vue

import { ref } from 'vue';

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

A Both components share the same counter state and increment together.

B Each component has its own independent counter state.

C The counter state is reset to 0 every time a component uses the composable.

D The counter state is shared only if components are nested.

💡 Hint

Think about what happens when a function returns a new ref each time it is called.

Each call to the composable function creates a new ref instance. So each component using useCounter gets its own separate state.

📝 Syntax

intermediate

Correct way to share reactive state across components using composables

Which option correctly shares a reactive count state across multiple components using a composable?

Vue

import { ref } from 'vue';

// Which composable shares the same count instance across components?

A

const count = ref(0);
export function useCount() { return { count }; }

B export function useCount() { return { count: 0 }; }

C export function useCount() { const count = ref(0); return { count }; }

D export function useCount() { const count = 0; return { count }; }

💡 Hint

Where should the ref be declared to share state?

Declaring count outside the function creates a single shared instance. Declaring inside creates a new instance per call.

🔧 Debug

advanced

Why does the shared composable state not update in the component?

A composable exports a reactive object declared outside the function. The component uses it but the UI does not update when the state changes. What is the likely cause?

Vue

import { reactive } from 'vue';

const state = reactive({ count: 0 });

export function useState() {
  return state;
}

// In component:
// const state = useState();
// state.count++;
// But UI does not reflect changes.

A The component must use <code>toRefs</code> to unwrap reactive properties for reactivity.

B The reactive object must be wrapped in a ref to update the UI.

C The component did not destructure the reactive object, so reactivity is lost.

D The reactive object is mutated outside Vue's reactivity system.

💡 Hint

Think about how Vue tracks reactivity when destructuring reactive objects.

Destructuring a reactive object breaks reactivity. Using toRefs preserves reactivity for each property.

❓ state_output

advanced

Output of shared composable with singleton pattern

Given this composable and two components using it, what is the final value of count.value after both components call increment() once?

Vue

import { ref } from 'vue';

const count = ref(0);

export function useSingletonCounter() {
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Component A calls increment()
// Component B calls increment()

A undefined

B 1

C 0

D 2

💡 Hint

Remember the shared count is a single reactive reference.

Since count is declared outside the function, both components share it. Each increment adds 1, so total is 2.

🧠 Conceptual

expert

Best practice for sharing composable state with reset capability

You want to share a reactive state across components but also allow resetting it to initial values. Which pattern is best?

A Use provide/inject to share state but do not expose reset functionality.

B Declare reactive state inside composable and recreate it on each call to reset.

C Declare reactive state outside composable and export a reset function that modifies it.

D Use a global variable and update it directly without Vue reactivity.

💡 Hint

Think about how to keep one shared reactive state and still allow controlled changes.

Declaring reactive state outside the composable shares it. Exporting a reset function lets components reset state consistently.

Practice

1. What is the main purpose of a composable in Vue 3?
function useCounter() { const count = ref(0); return { count }; }

easy

A. To register global Vue directives

B. To define a new component template

C. To style components with CSS

D. To share reusable reactive logic across multiple components

Solution

1. Step 1: Understand what a composable function does

   A composable is a function that returns reactive state or methods to be reused.

2. Step 2: Identify the purpose of the example composable

   The example returns a reactive count variable to share logic across components.

3. Final Answer:

   To share reusable reactive logic across multiple components -> Option D

4. Quick Check:

   Composable = reusable logic [OK]

Hint: Composable functions return reactive state for reuse [OK]

Common Mistakes:

• Thinking composables define templates
• Confusing composables with CSS styling
• Assuming composables register directives

2. Which is the correct way to import and use a composable named useTimer inside a Vue component's setup() function?

easy

A. import { useTimer } from './composables'; const { time } = useTimer();

B. import useTimer from './composables'; const time = useTimer;

C. const useTimer = require('./composables'); const { time } = useTimer();

D. import useTimer from './composables'; setup() { return useTimer; }

Solution

1. Step 1: Import the composable correctly

   Use ES module import syntax with curly braces if composable is a named export.

2. Step 2: Call the composable function inside setup()

   Call useTimer() to get reactive state, then destructure needed properties.

3. Final Answer:

   import { useTimer } from './composables'; const { time } = useTimer(); -> Option A

4. Quick Check:

   Import named + call function = correct usage [OK]

Hint: Import named composable and call it inside setup() [OK]

Common Mistakes:

• Using require() instead of import
• Not calling the composable function
• Importing default when composable is named export

3. Given this composable and component code, what will be logged?

// composable.js
import { ref } from 'vue';
export function useCount() {
  const count = ref(0);
  function increment() { count.value++; }
  return { count, increment };
}

// Component.vue
import { useCount } from './composable';
export default {
  setup() {
    const { count, increment } = useCount();
    increment();
    increment();
    console.log(count.value);
    return {};
  }
}

medium

A. 2

B. 0

C. undefined

D. Error: count is not defined

Solution

1. Step 1: Analyze composable logic

   Count starts at 0 and increments by 1 each time increment() is called.

2. Step 2: Trace component setup execution

   Increment is called twice, so count.value becomes 2, then logged.

3. Final Answer:

   2 -> Option A

4. Quick Check:

   Two increments = count 2 [OK]

Hint: Count increments twice, so value is 2 [OK]

Common Mistakes:

• Forgetting to call increment()
• Confusing ref with plain variable
• Expecting count to be 0 without increments

4. Identify the error in this composable usage:

import { ref } from 'vue';
export function useData() {
  const data = ref(null);
  fetch('/api').then(res => res.json()).then(json => data = json);
  return { data };
}

medium

A. Using ref instead of reactive

B. Missing await keyword before fetch

C. Reassigning the ref variable instead of its value

D. Not returning the data variable

Solution

1. Step 1: Check how ref is updated

   Ref variables must update their .value, not be reassigned.

2. Step 2: Identify the mistake in the fetch callback

   The code assigns data = json instead of data.value = json.

3. Final Answer:

   Reassigning the ref variable instead of its value -> Option C

4. Quick Check:

   Update ref.value, not ref itself [OK]

Hint: Update ref.value, not the ref variable [OK]

Common Mistakes:

• Assigning directly to ref variable
• Forgetting to handle async properly
• Confusing reactive with ref usage

5. You want to share a composable that tracks a user's online status across multiple components. Which approach ensures each component has its own independent reactive state?

hard

A. Export a single reactive object and import it directly in all components

B. Export a function that returns new refs each call, then import and call it in each component

C. Define reactive state inside a global variable outside the composable

D. Use a Vuex store instead of composables for reactive state

Solution

1. Step 1: Understand independent reactive state per component

   Each component needs its own fresh reactive refs to avoid shared state.

2. Step 2: Identify correct composable pattern

   Exporting a function that returns new refs each call creates isolated state per component.

3. Final Answer:

   Export a function that returns new refs each call, then import and call it in each component -> Option B

4. Quick Check:

   Function returns fresh state per call [OK]

Hint: Return new refs inside function for isolated state [OK]

Common Mistakes:

• Sharing a single reactive object causing shared state
• Using global variables outside composables
• Confusing Vuex with composables for local state