Options API vs Composition API decision in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a reactive data property in the Options API.

Vue

export default {
  data() {
    return {
      message: [1]
    };
  }
}

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

Aref('Hello Vue!')

B'Hello Vue!'

Ccomputed(() => 'Hello Vue!')

Dreactive('Hello Vue!')

Attempts:

3 left

💡 Hint

Common Mistakes

Using Composition API functions like ref() inside data() in Options API.

In the Options API, reactive data properties are defined as plain values inside the data() function's return object.

2fill in blank

medium

Complete the code to create a reactive variable using the Composition API.

Vue

<script setup>
import { [1] } from 'vue';
const count = [1](0);
</script>

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() for primitive values.

The ref function creates a reactive variable in the Composition API.

3fill in blank

hard

Fix the error in the Options API method to correctly access data property.

Vue

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.[1]++;
    }
  }
}

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

Acount

Bthis.count

Ccount()

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Writing this.this.count or calling count as a function.

Inside methods, this refers to the component instance, so this.count is correct. But since this is already used, just use count without this causes error. Actually, in Vue Options API, you must use this.count. So correct answer is count or this.count? The code says this.{{BLANK_1}}++; so the blank is after this. so the blank should be count.

4fill in blank

hard

Fill both blanks to create a computed property in the Composition API.

Vue

<script setup>
import { [1] } from 'vue';
const count = ref(0);
const double = [2](() => count.value * 2);
</script>

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

Acomputed

Bref

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref() instead of computed() for derived values.

The computed function is imported and used to create computed properties in the Composition API.

5fill in blank

hard

Fill all three blanks to define a reactive object and a method to update it in the Composition API.

Vue

<script setup>
import { [1], [2] } from 'vue';
const state = [3]({ count: 0 });
function increment() {
  state.count++;
}
</script>

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref() for objects instead of reactive().

To create a reactive object, import reactive. The watch import is extra here but included as distractor. The reactive object is created with reactive().

Practice

1. Which Vue API organizes component code by options like data, methods, and computed?

easy

A. Options API

B. Composition API

C. Both APIs organize code this way

D. Neither API uses options

Solution

1. Step 1: Understand Options API structure

   The Options API groups code by options such as data, methods, and computed.

2. Step 2: Compare with Composition API

   The Composition API organizes code inside the setup() function by logical features, not by options.

3. Final Answer:

   Options API -> Option A

4. Quick Check:

   Options API groups by options like data and methods [OK]

Hint: Options API groups by options, Composition API uses setup() [OK]

Common Mistakes:

• Confusing Composition API with Options API structure
• Thinking both APIs organize code the same way
• Believing Options API uses setup() function

2. Which of the following is the correct way to declare a reactive state variable using the Composition API in Vue?

easy

A. const count = ref(0); inside setup()

B. data() { return { count: 0 } }

C. methods: { count() { return 0 } }

D. computed: { count: () => 0 }

Solution

1. Step 1: Identify Composition API reactive declaration

   In Composition API, reactive state uses ref() inside setup(), e.g., const count = ref(0);.

2. Step 2: Compare other options

   data() { return { count: 0 } } is Options API syntax, A and D are for methods and computed properties, not reactive refs.

3. Final Answer:

   const count = ref(0); inside setup() -> Option A

4. Quick Check:

   Use ref() in setup() for reactive state [OK]

Hint: Use ref() inside setup() for reactive state in Composition API [OK]

Common Mistakes:

• Using data() syntax in Composition API
• Confusing methods with reactive state
• Trying to declare reactive state outside setup()

3. Given this Vue component using Composition API:

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

What will be the value of count after calling increment() twice?

medium

A. 0

B. 1

C. 2

D. undefined

Solution

1. Step 1: Understand ref and increment function

   count is a ref initialized to 0. Calling increment() increases count.value by 1 each time.

2. Step 2: Calculate count after two increments

   Starting at 0, after two increments: 0 + 1 + 1 = 2.

3. Final Answer:

   2 -> Option C

4. Quick Check:

   Two increments add 2 to count.value [OK]

Hint: ref.value changes with increments; count.value++ twice = 2 [OK]

Common Mistakes:

• Forgetting to use .value with ref
• Assuming count is a plain number, not a ref
• Thinking increment does not change count

4. Identify the error in this Vue component using Options API:

export default {
  data() {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

medium

A. Incorrect method name increment

B. data() should be a property, not a function

C. Using this.count instead of count

D. Missing return statement in data()

Solution

1. Step 1: Check data() function syntax

   In Options API, data() must return an object. Here, it lacks return keyword.

2. Step 2: Verify other parts

   Method name and usage of this.count are correct. data() is correctly a function.

3. Final Answer:

   Missing return statement in data() -> Option D

4. Quick Check:

   data() must return an object [OK]

Hint: data() must return an object with return keyword [OK]

Common Mistakes:

• Omitting return in data()
• Confusing this.count with count
• Thinking data() can be an object directly

5. You have a large Vue project with many components sharing logic like fetching data and handling loading states. Which API choice is best and why?

hard

A. Options API, because it separates code by options making it easier to read

B. Composition API, because it groups related logic together for better reuse

C. Options API, because it requires less code and is more modern

D. Composition API, because it avoids using setup() and is simpler

Solution

1. Step 1: Consider project size and logic reuse

   Large projects with shared logic benefit from grouping related code together for reuse and clarity.

2. Step 2: Compare API strengths

   Composition API allows grouping logic inside setup(), making reuse easier. Options API separates by options, which can scatter related logic.

3. Final Answer:

   Composition API, because it groups related logic together for better reuse -> Option B

4. Quick Check:

   Composition API groups logic for reuse in large projects [OK]

Hint: Use Composition API for reusable logic in big projects [OK]

Common Mistakes:

• Choosing Options API for better reuse in large projects
• Thinking Composition API avoids setup()
• Believing Options API is more modern