Reactivity caveats and limitations in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Vue

import { ref } from 'vue';
const count = [1](0);

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

Using computed or watch incorrectly here

In Vue 3, ref is used to create a reactive primitive value.

2fill in blank

medium

Complete the code to correctly update a reactive object's property so Vue tracks the change.

Vue

import { reactive } from 'vue';
const state = reactive({ count: 0 });
state.[1] = 1;

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

Aupdate

Bvalue

Cset

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use set or update methods which don't exist

Using .value which is for refs, not reactive objects

You update reactive object properties by assigning directly to the property name.

3fill in blank

hard

Fix the error in the code to make Vue track the new property added to a reactive object.

Vue

import { reactive } from 'vue';
const state = reactive({});
// Adding new property
state.[1] = 42;

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

AnewProp

Bvalue

Cset

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use set or add methods which don't exist

Using .value which is for refs, not reactive objects

Vue 3's reactive can track new properties added directly, so just use the property name.

4fill in blank

hard

Fill both blanks to create a reactive array and add a new item so Vue tracks the change.

Vue

import { [1] } from 'vue';
const items = [2]([]);
items.value.push('apple');

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 arrays

Trying to use computed or watch incorrectly

Use ref to make an array reactive and then modify it directly.

5fill in blank

hard

Fill all three blanks to create a reactive object, add a new property, and watch it for changes.

Vue

import { reactive, watch, [1] } from 'vue';
const state = reactive({ count: 0 });
state.[2] = 5;
watch(() => state.[3], (newVal) => console.log(newVal));

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

Aref

Btotal

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the new property and the watched property

Not importing ref when needed

Use ref in import, add property total, and watch total for changes.