Composable with reactive state in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive count variable inside a composable.

Vue

import { [1] } from 'vue';

export function useCounter() {
  const count = [1](0);
  return { count };
}

Drag options to blanks, or click blank then click option'

Aref

Bcomputed

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a number

Using computed when no dependencies exist

Using watch which is for side effects

We use ref to create a reactive primitive value like a number.

2fill in blank

medium

Complete the code to define a function that increments the count in the composable.

Vue

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count[1]++;
  }
  return { count, increment };
}

Drag options to blanks, or click blank then click option'

A.count

B.value

C()

D[0]

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to increment the ref directly without .value

Using array or function syntax incorrectly

To change the value inside a ref, we use .value.

3fill in blank

hard

Fix the error in the composable by completing the code to return reactive state correctly.

Vue

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  return [1];
}

Drag options to blanks, or click blank then click option'

Acount.value

Bcount

C[count]

D{ count }

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the ref directly instead of an object

Returning the value instead of the ref

Returning an array instead of an object

The composable should return an object with the reactive properties so they can be used by components.

4fill in blank

hard

Fill both blanks to create a composable that doubles the count reactively using a computed property.

Vue

import { ref, [1] } from 'vue';

export function useCounter() {
  const count = ref(0);
  const double = [2](() => count.value * 2);
  return { count, double };
}

Drag options to blanks, or click blank then click option'

Acomputed

Bwatch

Creactive

DtoRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using watch instead of computed for derived reactive values

Using reactive which is for objects

Using toRef which creates a ref from a reactive object property

We import and use computed to create a reactive value based on count.

5fill in blank

hard

Fill all three blanks to create a composable that tracks count, increments it, and resets it to zero.

Vue

import { [1] } from 'vue';

export function useCounter() {
  const count = [2](0);
  function increment() {
    count.value++;
  }
  function reset() {
    count.value = [3];
  }
  return { count, increment, reset };
}

Drag options to blanks, or click blank then click option'

Aref

Breactive

C0

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a number

Resetting count to null instead of zero

We use ref to create the reactive count, and reset sets it back to zero.

Practice

1. What is the main purpose of a composable function in Vue 3?

easy

A. To create new Vue components automatically

B. To define global CSS styles for the app

C. To replace the Vue router functionality

D. To reuse reactive state and logic across multiple components

Solution

1. Step 1: Understand composable function role

   Composable functions are designed to share reactive state and logic so multiple components can use them without repeating code.

2. Step 2: Eliminate unrelated options

   Creating new Vue components automatically, defining global CSS styles for the app, and replacing the Vue router functionality are all unrelated to composables.

3. Final Answer:

   To reuse reactive state and logic across multiple components -> Option D

4. Quick Check:

   Composable = reusable reactive logic [OK]

Hint: Composable = reusable reactive logic across components [OK]

Common Mistakes:

• Confusing composables with components
• Thinking composables handle styling or routing
• Assuming composables create UI elements

2. Which of the following is the correct way to create a reactive state inside a composable using Vue 3 Composition API?

easy

A. const count = reactive(0)

B. const count = ref(0)

C. const count = reactive({ value: 0 })

D. const count = ref({ value: 0 })

Solution

1. Step 1: Recall ref and reactive usage

   ref is used to create a reactive primitive like a number, string, or boolean. reactive is for objects.

2. Step 2: Analyze options

   const count = ref(0) correctly uses ref(0) for a reactive number. const count = reactive(0) is invalid because reactive expects an object, not a primitive. const count = reactive({ value: 0 }) wraps a number in an object but is less common for simple primitives. const count = ref({ value: 0 }) uses ref with an object, which works but is less idiomatic than reactive for objects.

3. Final Answer:

   const count = ref(0) -> Option B

4. Quick Check:

   Primitive reactive state uses ref() [OK]

Hint: Use ref() for primitives, reactive() for objects [OK]

Common Mistakes:

• Using reactive() with primitive values
• Using ref() for complex objects instead of reactive()
• Confusing ref({}) and reactive({}) usage

3. Given this composable code, what will be logged when increment() is called twice and then count.value is logged?

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

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

medium

A. 2

B. 0

C. 1

D. undefined

Solution

1. Step 1: Understand initial state and increments

   The count starts at 0. Each call to increment() increases count.value by 1.

2. Step 2: Calculate final value after two increments

   After two calls, count.value = 0 + 1 + 1 = 2.

3. Final Answer:

   2 -> Option A

4. Quick Check:

   Two increments add 2 to count.value [OK]

Hint: Increment ref.value to update reactive count [OK]

Common Mistakes:

• Forgetting to access .value on ref
• Assuming count is a plain number, not ref
• Confusing initial value with updated value

4. Identify the error in this composable code snippet:

import { reactive } from 'vue';
export function useUser() {
  const user = reactive({ name: 'Alice', age: 30 });
  function updateName(newName) {
    user.name = newName;
  }
  return { user, updateName };
}

const { user, updateName } = useUser();
updateName('Bob');
console.log(user.name);

medium

A. No error, code works correctly

B. Cannot assign to reactive object properties directly

C. updateName function is not returned

D. Missing import of ref

Solution

1. Step 1: Check reactive object usage

   The user object is created with reactive and its properties can be updated directly.

2. Step 2: Verify function and return

   The updateName function updates user.name correctly and is returned for use.

3. Final Answer:

   No error, code works correctly -> Option A

4. Quick Check:

   Reactive objects allow direct property assignment [OK]

Hint: reactive objects allow direct property changes [OK]

Common Mistakes:

• Thinking reactive properties are read-only
• Forgetting to return functions from composable
• Confusing ref and reactive usage

5. You want to create a composable that tracks a list of tasks reactively and provides a function to add a new task only if it is not empty. Which of the following implementations correctly achieves this?

hard

A. import { ref } from 'vue';
export function useTasks() {
const tasks = ref([]);
function addTask(task) {
tasks.push(task);
}
return { tasks, addTask };
}

B. import { reactive } from 'vue';
export function useTasks() {
const tasks = reactive([]);
function addTask(task) {
if (task) tasks.value.push(task);
}
return { tasks, addTask };
}

C. import { ref } from 'vue';
export function useTasks() {
const tasks = ref([]);
function addTask(task) {
if (task) tasks.value.push(task);
}
return { tasks, addTask };
}

D. import { reactive } from 'vue';
export function useTasks() {
const tasks = reactive([]);
function addTask(task) {
if (task.length > 0) tasks.value.push(task);
}
return { tasks, addTask };
}

Solution

1. Step 1: Choose correct reactive type for array

   Arrays as reactive state are best handled with ref([]) so we access the array via tasks.value.

2. Step 2: Validate addTask function logic

   import { ref } from 'vue'; export function useTasks() { const tasks = ref([]); function addTask(task) { if (task) tasks.value.push(task); } return { tasks, addTask }; } checks if task is truthy (not empty) before pushing to tasks.value, which is correct. import { reactive } from 'vue'; export function useTasks() { const tasks = reactive([]); function addTask(task) { if (task) tasks.value.push(task); } return { tasks, addTask }; } uses reactive([]) but incorrectly accesses tasks.value.push(task) since reactive does not have a value property. import { ref } from 'vue'; export function useTasks() { const tasks = ref([]); function addTask(task) { tasks.push(task); } return { tasks, addTask }; } pushes without checking if task is empty. import { reactive } from 'vue'; export function useTasks() { const tasks = reactive([]); function addTask(task) { if (task.length > 0) tasks.value.push(task); } return { tasks, addTask }; } incorrectly tries to access tasks.value when tasks is reactive, which does not have a value property.

3. Final Answer:

   use ref([]) with if (task) tasks.value.push(task) -> Option C

4. Quick Check:

   Use ref([]) for arrays and check input before push [OK]

Hint: Use ref([]) for reactive arrays and check input before push [OK]

Common Mistakes:

• Using reactive([]) for arrays instead of ref([])
• Forgetting to check if task is empty
• Accessing .value on reactive arrays