Watch vs computed decision in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a computed property in Vue.

Vue

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

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

Acomputed

Breactive

Cwatch

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'watch' instead of 'computed' for reactive values.

Forgetting to import 'computed' from Vue.

The computed function creates a reactive computed property that updates automatically when its dependencies change.

2fill in blank

medium

Complete the code to watch the 'count' ref and log its new value.

Vue

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal) => {
  console.log([1])
})
</script>

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

AoldVal

Bcount.value

CnewVal

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the ref itself instead of its new value.

Using 'count' instead of the callback parameter.

The watcher callback receives the new value as the first argument, commonly named newVal.

3fill in blank

hard

Fix the error in the watch usage to correctly watch a nested property.

Vue

<script setup>
import { reactive, watch } from 'vue'
const state = reactive({ user: { name: 'Alice' } })
watch([1], (newName) => {
  console.log('Name changed to', newName)
})
</script>

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

A() => state.user.name

Bstate.user.name

Cstate.user

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the nested property directly instead of a function.

Watching the whole object instead of the specific property.

To watch a nested property in a reactive object, use a getter function like () => state.user.name.

4fill in blank

hard

Fill both blanks to create a computed property that depends on 'firstName' and 'lastName'.

Vue

<script setup>
import { ref, [1] } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = [2](() => `${firstName.value} ${lastName.value}`)
</script>

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

Acomputed

Bwatch

Creactive

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'watch' instead of 'computed' for the property.

Importing 'ref' instead of 'computed'.

Both blanks require computed to import and create the computed property.

5fill in blank

hard

Fill both blanks to watch 'age' and update 'isAdult' accordingly.

Vue

<script setup>
import { ref, watch } from 'vue'
const age = ref(17)
const isAdult = ref(false)
watch([1], (newAge) => {
  isAdult.value = newAge [2] 18
})
</script>

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

Aage

B>=

C<

Dage.value

Attempts:

3 left

💡 Hint

Common Mistakes

Watching 'age.value' instead of 'age'.

Using '<' instead of '>=' for the adult check.

Watch the age ref, compare newAge with 18 using '>=' operator, and assign the result to isAdult.value.