Options API vs Composition API decision in Vue - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the main difference between Options API and Composition API

Which statement best describes the key difference between Vue's Options API and Composition API?

A Options API is only for Vue 2, and Composition API is only for Vue 3, so they cannot be used together.

B Options API organizes code by options like data, methods, and computed, while Composition API organizes code by logical features using functions.

C Options API requires class components, while Composition API only supports functional components.

D Options API uses reactive refs by default, while Composition API does not support reactivity.

💡 Hint

Think about how code is grouped and reused in each API style.

The Options API groups code by options like data, methods, and computed. The Composition API groups code by logical concerns using functions and reactive references, making it easier to reuse and organize complex logic.

❓ component_behavior

intermediate

Behavior difference in reactive state declaration

Consider these two Vue components. What is the main difference in how their reactive state is declared and accessed?

Component A (Options API):
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

Component B (Composition API):
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  }
}

A Component A uses a plain property accessed with 'this.count', Component B uses a ref accessed with 'count.value'.

B Component A uses refs accessed with 'count.value', Component B uses plain properties accessed with 'this.count'.

C Both components use refs but Component A returns them from data(), Component B returns them from setup().

D Component A cannot update count reactively, Component B updates count reactively.

💡 Hint

Think about how reactive variables are accessed differently in Options API vs Composition API.

In Options API, reactive state is declared as plain properties inside the data() function and accessed with this.count. In Composition API, reactive state uses ref and must be accessed with count.value.

📝 Syntax

advanced

Identify the correct Composition API setup function syntax

Which option shows the correct syntax for a Vue 3 Composition API setup function that returns a reactive variable and a method?

A

setup() {
  const message = ref('Hello');
  function update() {
    message.value = 'Hi';
  }
  return { message, update };
}

B

setup() {
  let message = 'Hello';
  function update() {
    message = 'Hi';
  }
  return { message, update };
}

C

setup() {
  const message = reactive('Hello');
  function update() {
    message = 'Hi';
  }
  return { message, update };
}

D

setup() {
  const message = ref('Hello');
  function update() {
    message = 'Hi';
  }
  return { message, update };
}

💡 Hint

Remember how to update a ref's value inside a function.

Option A correctly declares a ref and updates its value using message.value. Option A uses a plain variable which is not reactive. Option A incorrectly uses reactive on a string (should be an object). Option A tries to assign directly to the ref variable instead of its .value.

🔧 Debug

advanced

Debugging reactivity loss in Options API vs Composition API

Why does this Composition API code fail to update the displayed count, while the Options API version works?

Composition API snippet:
setup() {
  let count = 0;
  function increment() {
    count++;
  }
  return { count, increment };
}

A Because <code>count</code> should be declared inside <code>data()</code> instead of <code>setup()</code>.

B Because <code>increment</code> is not declared as an arrow function, so it loses context.

C Because <code>count</code> is a plain variable, not a ref, so Vue cannot track changes to it.

D Because the <code>return</code> statement is missing parentheses around the object.

💡 Hint

Think about what makes a variable reactive in Composition API.

In Composition API, variables must be wrapped in ref() or reactive() to be reactive. Declaring count as a plain number means Vue cannot detect changes, so the UI does not update.

❓ state_output

expert

Predict the rendered output after state changes in mixed API usage

Given this Vue 3 component mixing Options API and Composition API, what will be the final rendered count after calling incrementBoth() once?

export default {
  data() {
    return { countOptions: 0 };
  },
  setup() {
    const countComposition = ref(0);
    function incrementBoth() {
      this.countOptions++;
      countComposition.value++;
    }
    return { countComposition, incrementBoth };
  }
}

Template displays: {{ countOptions }} - {{ countComposition }}

A 0 - 0

B 1 - 1

C 1 - 0

D 0 - 1

💡 Hint

Consider the context of this inside incrementBoth in Composition API.

Inside the setup() function, this is undefined. So this.countOptions++ does not update the Options API state. Only countComposition.value++ updates, so the rendered output is 0 - 1.