Consider this Vue 3 component using the Composition API. What will be the displayed count after clicking the button twice?
<template> <button @click="increment">Clicked {{ count }} times</button> </template> <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script>
Remember how ref works and how the increment function changes the value.
The count starts at 0. Each click increases it by 1. After two clicks, it becomes 2, so the button shows "Clicked 2 times".
Identify the correct syntax to bind a click event to a method named handleClick in a Vue 3 template.
<template> <!-- Choose the correct button syntax --> </template>
Vue 3 supports shorthand for event binding. Consider if parentheses are needed.
In Vue 3, @click="handleClick" binds the method without calling it immediately. Using parentheses calls it immediately on render, which is incorrect.
Examine the code below. The message does not update when the button is clicked. What is the cause?
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update</button>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({ message: 'Hello' })
function updateMessage() {
state.message = 'Updated!'
}
</script>Check the variable names used in the template and script.
The template tries to display message, but the reactive object is state. The correct usage is {{ state.message }} to reflect changes.
Given this Vue 3 component, what is the value of count after the updateCount function runs?
<script setup> import { ref } from 'vue' const count = ref(0) function updateCount() { count.value += 1 count.value += 2 count.value = count.value * 2 } updateCount() </script>
Calculate step-by-step how count.value changes.
Starting at 0, add 1 → 1, add 2 → 3, then multiply by 2 → 6.
reactive and ref is true?Choose the correct statement about the difference between reactive and ref in Vue 3.
Think about how Vue tracks changes for simple values vs complex objects.
ref wraps primitive values (like numbers, strings) to make them reactive. reactive wraps objects or arrays to create a reactive proxy that tracks nested properties.