Composable with reactive state in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue composable usage?

Consider this composable and component setup. What will the component display after clicking the button twice?

Vue

import { ref } from 'vue';

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

// Component setup
import { useCounter } from './useCounter';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  },
  template: `<div><button @click="increment">Add</button><p>{{ count }}</p></div>`
});

A 2

B 1

C 0

D undefined

💡 Hint

Each click increases the count by 1 starting from 0.

The composable useCounter returns a reactive count starting at 0. Each button click calls increment which adds 1. After two clicks, count is 2.

📝 Syntax

intermediate

Which option correctly defines a reactive state in a Vue composable?

Choose the correct way to create a reactive object with a name property initialized to 'Alice' inside a composable.

A const state = reactive('Alice');

B const state = reactive({ name: 'Alice' });

C const state = ref({ name: 'Alice' });

D const state = ref('name', 'Alice');

💡 Hint

Use reactive for objects and ref for primitives or single values.

reactive wraps an object to make all its properties reactive. Option B correctly creates a reactive object with a name property.

🔧 Debug

advanced

Why does this composable not update the component view?

Given this composable and component, why does the displayed count not update when calling increment?

Vue

import { reactive, toRefs } from 'vue';

export function useCounter() {
  const state = reactive({ count: 0 });
  function increment() {
    state.count += 1;
  }
  return { count: state.count, increment };
}

// Component setup
import { useCounter } from './useCounter';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  },
  template: `<div><button @click="increment">Add</button><p>{{ count }}</p></div>`
});

A Because the component template syntax is incorrect

B Because reactive objects cannot be used in composables

C Because increment does not modify the count property

D Because count is returned as a primitive value, not a reactive reference

💡 Hint

Check how count is returned and used in the component.

The composable returns count: state.count which is a plain number, not reactive. The component sees a fixed value. To keep reactivity, return state or toRefs(state).

❓ state_output

advanced

What is the value of count after this sequence?

Using this composable, what is the value of count.value after calling increment() three times?

Vue

import { ref } from 'vue';

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

const { count, increment } = useCounter();
increment();
increment();
increment();

A 9

B 3

C 6

D 0

💡 Hint

Each increment adds 2 to count starting from 0.

Each call adds 2, so after 3 calls count is 0 + 2 + 2 + 2 = 6.

🧠 Conceptual

expert

Which statement best describes Vue composables with reactive state?

Choose the most accurate description of how composables manage reactive state in Vue.

A Composables encapsulate reactive state and logic, returning refs or reactive objects to maintain reactivity across components.

B Composables only return plain JavaScript objects and cannot hold reactive state.

C Composables must use Vuex to manage any reactive state shared between components.

D Composables automatically sync reactive state with the server without extra code.

💡 Hint

Think about how composables share reactive data and logic.

Composables are functions that encapsulate reactive state and logic. They return refs or reactive objects so components using them stay reactive. Vuex is optional and composables do not sync automatically with servers.