Why composables matter in Vue - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use composables in Vue 3?

What is the main benefit of using composables in Vue 3's Composition API?

A They automatically optimize rendering performance without extra code.

B They allow reusing logic across components without duplicating code.

C They replace templates with plain JavaScript functions for UI rendering.

D They enforce strict typing on component props and events.

💡 Hint

Think about how you can share code between components easily.

Composables let you extract and reuse reactive logic in multiple components, avoiding repetition and improving maintainability.

❓ component_behavior

intermediate

Effect of composable on component state

Given this composable and component code, what will be the value of count after clicking the button twice?

Vue

import { ref } from 'vue';

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

// In component setup:
const { count, increment } = useCounter();

// Button click calls increment()

A 2

B 0

C 1

D undefined

💡 Hint

Each click calls increment() which increases count by 1.

The count ref starts at 0 and increments by 1 on each button click, so after two clicks it becomes 2.

❓ lifecycle

advanced

Composables and component lifecycle hooks

Which lifecycle hook is best to use inside a composable to run code when the component using it is mounted?

A setup

B created

C beforeDestroy

D onMounted

💡 Hint

Consider when the DOM is ready for interaction.

onMounted runs after the component is mounted to the DOM, making it ideal for composables needing to run code at that time.

📝 Syntax

advanced

Correct syntax for a composable function

Which option shows the correct syntax for a Vue 3 composable that provides a reactive message and a function to update it?

A

import { ref } from 'vue';
export function useMessage() {
  const message = ref('Hello');
  function updateMessage(newMsg) {
    message.value = newMsg;
  }
  return { message, updateMessage };
}

B

import { reactive } from 'vue';
export function useMessage() {
  const message = reactive('Hello');
  function updateMessage(newMsg) {
    message = newMsg;
  }
  return { message, updateMessage };
}

C

export function useMessage() {
  let message = 'Hello';
  function updateMessage(newMsg) {
    message = newMsg;
  }
  return { message, updateMessage };
}

D

import { ref } from 'vue';
export function useMessage() {
  const message = ref('Hello');
  function updateMessage(newMsg) {
    message = newMsg;
  }
  return { message, updateMessage };
}

💡 Hint

Remember how to update a ref value properly.

Option A correctly uses ref and updates message.value. Other options misuse reactive or assign directly to ref variable.

🔧 Debug

expert

Why does this composable cause shared state bug?

Consider this composable used in multiple components. Why do all components share the same count value?

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

A Because <code>increment</code> does not update <code>count.value</code> correctly.

B Because <code>ref</code> does not create reactive state inside composables.

C Because <code>count</code> is declared outside the function, so it's shared across all uses.

D Because the composable is missing a return statement.

💡 Hint

Think about where variables are declared and how that affects sharing.

Declaring count outside the composable function creates a single shared reactive variable used by all components, causing shared state.