What is Vue - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is Vue's primary purpose?

Vue is a popular tool in web development. What is its main job?

A To style web pages with colors and fonts

B To manage databases and server-side logic

C To build user interfaces and single-page applications

D To write backend APIs in Node.js

💡 Hint

Think about what you see and interact with on websites.

Vue is a JavaScript framework mainly used to create interactive user interfaces and single-page applications.

❓ component_behavior

intermediate

What happens when you update a reactive property in Vue?

In Vue, if you change a reactive data property, what does Vue do?

A It ignores the change until the user refreshes the page

B It reloads the entire webpage

C It sends the data to the server immediately

D It automatically updates the parts of the webpage that use that data

💡 Hint

Vue tracks data changes to keep the page in sync.

Vue uses a reactive system that detects data changes and updates the webpage automatically without reloading.

📝 Syntax

advanced

Which Vue 3 syntax correctly defines a reactive state using Composition API?

Choose the correct way to create a reactive count variable in Vue 3 Composition API.

A const count = ref(0);

B const count = reactive(0);

C const count = reactive({ value: 0 });

D const count = ref({ count: 0 });

💡 Hint

Use ref for primitive values like numbers.

In Vue 3, ref is used to create reactive primitive values, while reactive is for objects.

🔧 Debug

advanced

Why does this Vue component not update the displayed count?

Look at this Vue 3 component code snippet: Why does clicking the button not change the number shown?

A Because the template syntax {{ count }} is incorrect

B Because count is a plain variable, not reactive, so Vue does not track changes

C Because the increment function is not called on button click

D Because the script setup block is missing the export default statement

💡 Hint

Vue needs reactive variables to update the UI automatically.

Declaring count as a plain variable means Vue does not track its changes, so the UI stays the same.

❓ lifecycle

expert

When does the Vue 'onMounted' lifecycle hook run?

In Vue 3, the 'onMounted' hook is used inside setup(). When exactly does it run?

A After the component is added to the DOM and rendered

B Immediately when the script setup block starts running

C When the component is destroyed and removed from the DOM

D Before the component is created but after props are set

💡 Hint

Think about when you want to run code that needs the component visible on the page.

'onMounted' runs after the component is fully rendered and attached to the page, perfect for DOM-dependent code.

Practice

1. What is Vue primarily used for?

easy

A. Managing databases and server data

B. Building interactive user interfaces with components

C. Writing backend server code

D. Designing static HTML pages without interaction

Solution

1. Step 1: Understand Vue's purpose

   Vue is a tool to create interactive parts of websites, called components.

2. Step 2: Compare options

   Only Building interactive user interfaces with components describes building interactive interfaces, which matches Vue's main use.

3. Final Answer:

   Building interactive user interfaces with components -> Option B

4. Quick Check:

   Vue = interactive UI builder [OK]

Hint: Vue is for interactive UI, not backend or static pages [OK]

Common Mistakes:

• Confusing Vue with backend frameworks
• Thinking Vue only creates static pages
• Assuming Vue manages databases

2. Which of the following is the correct way to start a Vue component file?

easy

A.

B. Hello Vue

C.

D. Hello Vue

Solution

1. Step 1: Identify Vue file structure

   Vue components use for HTML structure.

2. Step 2: Match options to Vue syntax

   Only
   Hello Vue
   uses correctly to start a Vue component.

3. Final Answer:

   <template><div>Hello Vue</div></template> -> Option D

4. Quick Check:

   Vue components start with <template> [OK]

Hint: Vue components start with <template> tag [OK]

Common Mistakes:

• Using <html> instead of <template>
• Putting HTML inside <script> tag
• Confusing <style> with HTML structure

3. What will this Vue template display if message is set to 'Hello World' in the component's data?

<template>
  <div>{{ message }}</div>
</template>

medium

A. Hello World

B. {{ message }}

C. message

D. Error: message not defined

Solution

1. Step 1: Understand Vue's data binding

   Vue replaces {{ message }} with the value of message from data.

2. Step 2: Apply given data value

   Since message = 'Hello World', the template shows 'Hello World'.

3. Final Answer:

   Hello World -> Option A

4. Quick Check:

   Data binding shows message value [OK]

Hint: {{ }} shows data values, not raw text [OK]

Common Mistakes:

• Thinking {{ message }} prints literally
• Expecting variable name instead of value
• Assuming error if data is defined

4. Identify the error in this Vue component code:

<template>
  <div>{{ title }}</div>
</template>

<script setup>
const title = 'Welcome to Vue'
</script>

medium

A. No error, code is correct

B. Using

C. Missing semicolon after const declaration

D. title variable not reactive

Solution

1. Step 1: Check Vue 3 syntax correctness

   Using

Hint: Vue 3

Common Mistakes:

• Expecting semicolon is mandatory in JS
• Thinking
• Assuming const variables are not reactive

5. You want to create a Vue component that shows a list of items and updates automatically when the list changes. Which Vue feature helps achieve this?

hard

A. Writing all HTML inside <script> tag

B. Using plain JavaScript arrays without Vue features

C. Reactive data binding with ref or reactive

D. Manually updating the DOM with document.querySelector

Solution

1. Step 1: Understand Vue's reactivity system

   Vue uses reactive data (ref/reactive) to track changes and update the UI automatically.

2. Step 2: Compare options for dynamic updates

   Only Reactive data binding with ref or reactive uses Vue's reactive data binding to update the list automatically.

3. Final Answer:

   Reactive data binding with ref or reactive -> Option C

4. Quick Check:

   Vue reactivity updates UI automatically [OK]

Hint: Use Vue's reactive data to auto-update UI [OK]

Common Mistakes:

• Trying to update DOM manually instead of reactive data
• Using plain arrays without Vue reactivity
• Putting HTML inside <script> tag