Script setup syntax in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue component using script setup?

Consider this Vue 3 component using <script setup> syntax. What will it display on the page?

Vue

<template>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello from script setup!')
</script>

A An empty paragraph

B Hello from script setup!

C Error: message is not defined

D undefined

💡 Hint

Remember that ref creates a reactive variable and you can use it directly in the template.

The message variable is a ref holding the string. Vue unwraps ref values in templates, so it displays the string content.

📝 Syntax

intermediate

Which option correctly defines a reactive object using script setup?

Choose the correct way to define a reactive object named user with properties name and age inside <script setup>.

A const user = reactive({ name: 'Alice', age: 30 })

B const user = ref({ name: 'Alice', age: 30 })

C const user = reactive('name: Alice, age: 30')

D const user = ref('name: Alice, age: 30')

💡 Hint

Use reactive for objects and ref for primitive values or single objects.

reactive wraps an object to make all its properties reactive. Option A correctly uses an object literal.

🔧 Debug

advanced

Why doesn't this script setup component update the count?

Look at this component code. Why doesn't the displayed count update?

Vue

<template>
  <p>{{ count }}</p>
</template>

<script setup>
let count = 0
setInterval(() => {
  count++
}, 1000)
</script>

A Because <code>count</code> is not reactive, so Vue cannot track changes

B Because <code>setInterval</code> is not allowed inside <code>script setup</code>

C Because <code>count</code> should be declared with <code>const</code> instead of <code>let</code>

D Because the template cannot access variables declared in <code>script setup</code>

💡 Hint

Think about how Vue tracks changes to update the template.

Variables declared as plain let are not reactive. Vue won't update the template when count changes. Using ref makes it reactive.

❓ lifecycle

advanced

How to correctly use the onMounted lifecycle hook in script setup?

Which code snippet correctly runs a function when the component is mounted using <script setup>?

A

import { onMounted } from 'vue'
setup() { onMounted(() => { console.log('Mounted!') }) }

B onMounted(() => { console.log('Mounted!') })

C

import { onMounted } from 'vue'
onMounted(() => { console.log('Mounted!') })

D

import { mounted } from 'vue'
mounted(() => { console.log('Mounted!') })

💡 Hint

Remember script setup is a simpler syntax without explicit setup() function.

Option C correctly imports and calls onMounted directly in script setup. Option C is invalid because setup() is not used explicitly here.

🧠 Conceptual

expert

What is the main advantage of using <script setup> over traditional setup() function in Vue 3?

Choose the best explanation for why <script setup> is preferred in many Vue 3 projects.

A It automatically converts all variables to reactive without importing anything

B It disables the template syntax and requires manual DOM manipulation

C It allows using class-based components inside Vue 3 without extra setup

D It reduces boilerplate by removing the need to return variables and allows direct use of composition API features

💡 Hint

Think about how script setup simplifies component code.

<script setup> lets you write less code by skipping the explicit return statement and enables direct use of imports and reactive variables in templates.