The modern way to create a Vue 3 project is using npm create vue@latest my-vue-app. This uses the latest official Vue scaffolding tool.
Option A is the old Vue CLI command which requires global installation and may not default to Vue 3.
Option A is from an older Vue CLI version and is deprecated.
Option A is invalid syntax.
App.vue contains a template with a <h1> tag showing "Welcome to Your Vue.js App". What will you see in the browser when you run the project?<template> <h1>Welcome to Your Vue.js App</h1> </template> <script setup> // no script content </script> <style> h1 { color: #42b983; } </style>
The <h1> text will appear in a green color (#42b983) because of the CSS style defined in the component.
The empty <script setup> does not affect rendering.
onMounted lifecycle hook run in a Vue 3 component?onMounted hook inside the setup() function of a Vue 3 component. When exactly does this hook execute?The onMounted hook runs after the component is inserted into the DOM and visible to the user.
This is useful for code that needs the DOM elements to exist, like accessing refs or starting animations.
import { ref } from 'vue';
export default {
setup() {
let count = 0;
function increment() {
count++;
}
return { count, increment };
}
}{{ count }} and a button calls increment. Why does the displayed count not update when the button is clicked?In Vue 3, reactive state must be wrapped in ref() or reactive() to track changes.
Here, count is a plain number variable, so Vue does not detect changes and the UI does not update.
The Composition API lets you group related reactive state, computed properties, and functions together in the setup() function.
This improves code organization and makes it easier to reuse logic across components.
Options A, B, and C are incorrect because performance depends on many factors, templates are still used, and lifecycle hooks are still needed.