Why advanced patterns matter in Vue - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue 3 component render?

Consider this Vue 3 component using the Composition API. What will be displayed when the component is rendered?

Vue

<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">Increment</button>
  <p>Count: {{ count }}</p>
  <p>Doubled: {{ doubled }}</p>
</template>

A Component throws an error because computed is used incorrectly

B Count: 0 and Doubled: 0 initially; clicking button increments count but doubled does not update

C Count and Doubled both show 0 and never change even after clicking the button

D Count: 0 and Doubled: 0 initially; clicking button increments count and doubled updates accordingly

💡 Hint

Think about how Vue's reactivity system updates computed properties when dependencies change.

The ref 'count' is reactive. The computed 'doubled' depends on 'count.value'. When 'count' changes, 'doubled' updates automatically. The template shows reactive values, so UI updates on button clicks.

📝 Syntax

intermediate

Which option correctly uses Vue 3's