Creating a custom composable in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue Composition API function needed to create a reactive reference.

Vue

import { [1] } from 'vue';

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref

Using computed when ref is needed

The ref function creates a reactive reference to a value in Vue's Composition API.

2fill in blank

medium

Complete the code to define a custom composable that returns a reactive count and an increment function.

Vue

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

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

Aref

Bwatch

Ccomputed

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a primitive value

Forgetting to use .value when incrementing

We use ref(0) to create a reactive count starting at zero.

3fill in blank

hard

Fix the error in the composable by completing the code to watch the count and log changes.

Vue

import { ref, watch } from 'vue';

export function useCounterLogger() {
  const count = ref(0);
  watch(count, (newVal, oldVal) => {
    console.log('Count changed from', [1], 'to', newVal);
  });
  function increment() {
    count.value++;
  }
  return { count, increment };
}

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

AnewVal.value

Bcount.value

ColdVal.value

DoldVal

Attempts:

3 left

💡 Hint

Common Mistakes

Using .value on oldVal causing undefined errors

Logging count.value instead of oldVal

The watch callback receives the old value directly as oldVal, no need for .value.

4fill in blank

hard

Fill both blanks to create a composable that returns a reactive message and a function to update it.

Vue

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

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

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Importing computed or watch instead of reactive

Forgetting to import ref

We import ref to create reactive references and reactive is a common import but not used here. The correct imports are ref and reactive to match the options, but only ref is used in code.

5fill in blank

hard

Fill all three blanks to create a composable that returns a reactive count, an increment function, and a computed double count.

Vue

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

export function useAdvancedCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  const doubleCount = computed(() => count.value * 2);
  return { count, increment, doubleCount };
}

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

Aref

Bcomputed

Cwatch

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up order of imports

Forgetting to import computed

The correct imports are reactive, computed, and ref. Here, ref creates reactive values, computed creates derived reactive values, and reactive is often imported but not used in this snippet.