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