Composable accepting parameters in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue composable usage?

Consider this composable that accepts a parameter and returns a reactive value:

import { ref } from 'vue'

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

In a component, we use it like this:

const { count, increment } = useCounter(5)
increment()
increment()
console.log(count.value)

What will be logged?

Vue

import { ref } from 'vue'

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

const { count, increment } = useCounter(5)
increment()
increment()
console.log(count.value)

A 7

B undefined

C 2

D 5

💡 Hint

Think about how many times increment() is called and what count starts at.

The composable useCounter starts the count at 5. Each call to increment() adds 1. Called twice, count becomes 7.

📝 Syntax

intermediate

Which option correctly defines a composable accepting a parameter?

Which of these Vue composable definitions correctly accepts a parameter initialValue and returns a reactive value initialized with it?

A

export function useValue(initialValue) {
  const value = ref(initialValue)
  return { value }
}

B

export function useValue(initialValue) {
  const value = reactive(initialValue)
  return value
}

C

export function useValue() {
  const value = ref(initialValue)
  return { value }
}

D

export function useValue(initialValue) {
  const value = ref()
  value = initialValue
  return { value }
}

💡 Hint

Remember to initialize ref with the parameter and return it properly.

Option A correctly takes initialValue as parameter, initializes value with ref(initialValue), and returns it inside an object.

Option A uses initialValue without parameter, causing error.

Option A uses reactive on a primitive, which is incorrect.

Option A tries to assign to a const variable, causing error.

🔧 Debug

advanced

Why does this composable not update the reactive value?

Look at this composable:

import { ref } from 'vue'

export function useToggle(initial) {
  let state = ref(initial)
  function toggle() {
    state = !state
  }
  return { state, toggle }
}

When used, calling toggle() does not update state.value. Why?

Vue

import { ref } from 'vue'

export function useToggle(initial) {
  let state = ref(initial)
  function toggle() {
    state = !state
  }
  return { state, toggle }
}

A Because the function toggle is not called properly

B Because ref cannot hold boolean values

C Because the toggle function assigns a boolean to the ref variable instead of updating state.value

D Because the initial parameter is not reactive

💡 Hint

Check how the toggle function changes state.

The toggle function assigns a boolean directly to state, replacing the ref object. It should update state.value instead.

❓ state_output

advanced

What is the value of count after this composable usage?

Given this composable:

import { ref } from 'vue'

export function useStepCounter(start, step) {
  const count = ref(start)
  function advance() {
    count.value += step
  }
  return { count, advance }
}

And this usage:

const { count, advance } = useStepCounter(10, 3)
advance()
advance()
advance()
console.log(count.value)

What is logged?

Vue

import { ref } from 'vue'

export function useStepCounter(start, step) {
  const count = ref(start)
  function advance() {
    count.value += step
  }
  return { count, advance }
}

const { count, advance } = useStepCounter(10, 3)
advance()
advance()
advance()
console.log(count.value)

A 13

B 19

C 10

D undefined

💡 Hint

Count starts at 10 and increases by 3 each advance call.

Starting at 10, three advances add 3 each: 10 + 3 + 3 + 3 = 19.

🧠 Conceptual

expert

Why pass parameters to a composable instead of hardcoding values?

In Vue, why is it better to pass parameters to a composable function rather than hardcoding values inside it?

A Hardcoding values prevents accidental changes to reactive state

B Hardcoding values improves performance by avoiding parameter parsing

C Parameters are required to make the composable reactive

D Passing parameters makes the composable reusable with different data and easier to test

💡 Hint

Think about reusability and flexibility.

Passing parameters allows the composable to work with different inputs, making it reusable and easier to test. Hardcoding limits flexibility.

Practice

1.

What is the main purpose of passing parameters to a Vue composable function?

easy

A. To customize the composable's behavior for different uses

B. To make the composable function run only once

C. To prevent the composable from using Vue's reactivity

D. To automatically render a template inside the composable

Solution

1. Step 1: Understand composable functions

   Composable functions are reusable pieces of logic in Vue that can be shared across components.

2. Step 2: Role of parameters in composables

   Parameters allow passing different inputs to the composable so it can behave differently depending on the need.

3. Final Answer:

   To customize the composable's behavior for different uses -> Option A

4. Quick Check:

   Parameters customize composables = A [OK]

Hint: Parameters let composables adapt to different inputs [OK]

Common Mistakes:

• Thinking composables run only once
• Believing parameters disable reactivity
• Confusing composables with templates

2.

Which of the following is the correct way to define a composable that accepts a parameter initialCount?

function useCounter(???) {
  const count = ref(initialCount)
  return { count }
}

easy

A. useCounter((initialCount))

B. useCounter()

C. useCounter(initialCount)

D. useCounter(initialCount: number)

Solution

1. Step 1: Check JavaScript function parameter syntax

   In JavaScript, function parameters are named without types or parentheses inside the parentheses.

2. Step 2: Match parameter name with usage

   The parameter initialCount must be declared inside the parentheses as initialCount.

3. Final Answer:

   useCounter(initialCount) -> Option C

4. Quick Check:

   Function parameter syntax = D [OK]

Hint: Function parameters go inside parentheses without types [OK]

Common Mistakes:

• Adding types like in TypeScript without syntax
• Using parentheses inside parameter list
• Leaving parameters empty when needed

3.

Given this composable and usage, what will be logged?

import { ref } from 'vue'
function useGreeting(name) {
  const greeting = ref(`Hello, ${name}!`)
  return { greeting }
}

const { greeting } = useGreeting('Alice')
console.log(greeting.value)

medium

A. undefined

B. "Hello, Alice!"

C. "Hello, name!"

D. Error: greeting is not defined

Solution

1. Step 1: Understand parameter passing

   The composable receives 'Alice' as the name parameter, so the greeting string becomes "Hello, Alice!".

2. Step 2: Accessing the ref value

   The greeting is a ref, so to get the string, we use greeting.value, which logs "Hello, Alice!".

3. Final Answer:

   "Hello, Alice!" -> Option B

4. Quick Check:

   Ref .value logs "Hello, Alice!" = C [OK]

Hint: Use .value to get ref content in Vue composables [OK]

Common Mistakes:

• Logging the ref object instead of its value
• Confusing parameter name with string literal
• Forgetting to import ref from 'vue'

4.

Identify the error in this composable that accepts a parameter start:

import { ref } from 'vue'
function useTimer(start) {
  const time = ref(start)
  function increment() {
    time++
  }
  return { time, increment }
}

medium

A. Cannot increment a ref directly with ++ operator

B. Missing return statement for increment function

C. Parameter start is not reactive

D. Ref should be initialized with 0, not start

Solution

1. Step 1: Check how ref values are updated

   Refs hold their value inside the .value property, so you cannot increment the ref itself.

2. Step 2: Identify correct increment syntax

   The increment function should update time.value++ instead of time++.

3. Final Answer:

   Cannot increment a ref directly with ++ operator -> Option A

4. Quick Check:

   Update ref via .value, not ref itself = B [OK]

Hint: Use .value to update ref, not the ref variable itself [OK]

Common Mistakes:

• Trying to increment ref without .value
• Thinking parameters must be reactive
• Forgetting to return functions from composable

5.

You want a composable useFilteredList that accepts an array and a filter function as parameters. Which implementation correctly applies the filter reactively?

import { computed } from 'vue'

function useFilteredList(list, filterFn) {
  const filtered = computed(() => ??? )
  return { filtered }
}

What should replace ????

hard

A. list.filter(filterFn)

B. filterFn(list)

C. computed(() => list.filter(filterFn))

D. list.value.filter(filterFn)

Solution

1. Step 1: Understand composable parameters

   The list parameter is expected to be a ref(array) for proper reactivity in Vue composables.

2. Step 2: Reactive filtering with computed

   Inside the computed, access the array value with list.value.filter(filterFn) to apply the filter reactively whenever the list changes.

3. Final Answer:

   list.value.filter(filterFn) -> Option D

4. Quick Check:

   computed(() => list.value.filter(filterFn)) = C [OK]

Hint: Use computed(() => list.value.filter(fn)) for reactive filtering [OK]

Common Mistakes:

• Using list.filter(filterFn) without .value when list is ref
• Calling filterFn(list) instead of list.filter(filterFn)
• Unnecessarily nesting computed inside computed