Defining components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue component render?

Consider this Vue 3 component using the Composition API. What will be the rendered output inside the

?

Vue

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

A A button labeled 'Increment' but the paragraph never updates from 'Count is: 0' on clicks.

B A button labeled 'Increment' and a paragraph showing 'Count is: undefined' because count is not reactive.

C Nothing renders because the component is missing a return statement.

D A button labeled 'Increment' and a paragraph showing 'Count is: 0' initially, increasing by 1 each click.

💡 Hint

Remember that ref() creates a reactive value and updating count.value triggers re-render.

The count variable is reactive using ref(). The template binds to count, so it updates when increment() changes count.value.

📝 Syntax

intermediate

Which option correctly defines a standalone Vue 3 component?

Select the code snippet that correctly defines a standalone Vue 3 component using the Composition API and