Why composables matter in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue Composition API function used to create reactive state.

Vue

import { [1] } from 'vue';

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

Acomputed

Breactive

Cwatch

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' instead of 'ref' when a simple reactive value is needed.

Confusing 'computed' with state creation.

Importing from the wrong package.

The ref function creates a reactive reference to a value, which is a basic building block in Vue composables.

2fill in blank

medium

Complete the code to define a composable function that returns a reactive count.

Vue

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

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' which is for objects, not primitives.

Trying to use 'computed' without a getter function.

The ref function is used to create a reactive primitive value like a number inside a composable.

3fill in blank

hard

Fix the error in the composable by completing the code to update the count value.

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()

B.value

C[0]

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to increment the ref directly without '.value'.

Using parentheses or brackets which cause errors.

In Vue's ref, the actual value is accessed and updated via the .value property.

4fill in blank

hard

Fill both blanks to create a composable that returns a reactive object with a method to reset the count.

Vue

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

export function useCounter() {
  const state = [1]({ count: 0 });
  function reset() {
    state.count = 0;
  }
  return { state, reset };
}

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ref' to create an object instead of 'reactive'.

Not importing both functions as shown.

reactive creates a reactive object, and ref is also imported but not used here. The blank for import includes both to show common imports.

5fill in blank

hard

Fill all three blanks to create a composable that uses a computed property to double the count.

Vue

import { [1], [2], [3] } from 'vue';

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

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'ref' and 'reactive' for primitive values.

Not using 'computed' for derived reactive values.

ref creates the reactive count, computed creates the double value, and reactive is imported but unused here to show common imports.