Dynamic render patterns in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue 3 component render?

Consider this Vue 3 component using v-if and v-for together:

<template>
  <ul>
    <li v-for="item in items" :key="item.id" v-if="item.visible">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, name: 'Apple', visible: true },
  { id: 2, name: 'Banana', visible: false },
  { id: 3, name: 'Cherry', visible: true }
])
</script>

What will be the rendered output inside the <ul>?

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id" v-if="item.visible">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, name: 'Apple', visible: true },
  { id: 2, name: 'Banana', visible: false },
  { id: 3, name: 'Cherry', visible: true }
])
</script>

A <ul><li>Apple</li><li>Cherry</li></ul>

B <ul></ul>

C <ul><li>Apple</li></ul>

D <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>

💡 Hint

Remember that v-if inside v-for filters items after looping.

The v-for loops over all items, but v-if only renders the

if item.visible is true. So only 'Apple' and 'Cherry' appear.

❓ state_output

intermediate

What is the output after clicking the button twice?

This Vue 3 component toggles a message on button click:

<template>
  <button @click="toggle">Toggle</button>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const message = ref('Hidden')
function toggle() {
  show.value = !show.value
  message.value = show.value ? 'Visible' : 'Hidden'
}
</script>

What will the <p> show after clicking the button twice?

Vue

<template>
  <button @click="toggle">Toggle</button>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const message = ref('Hidden')
function toggle() {
  show.value = !show.value
  message.value = show.value ? 'Visible' : 'Hidden'
}
</script>

A Error: message is not defined

B VisibleVisible

C Hidden

D Visible

💡 Hint

Each click toggles the state. Think about the state after two toggles.

Initially, show is false and message is 'Hidden'. After first click, show becomes true and message 'Visible'. After second click, show toggles back to false and message 'Hidden'.

📝 Syntax

advanced

Which option correctly uses dynamic component rendering in Vue 3?

You want to render a component dynamically based on a variable currentView. Which option uses the correct syntax?

Vue

<template>
  <component :is="currentView" />
</template>

<script setup>
import { ref } from 'vue'
const currentView = ref('MyComponent')
</script>

A <component :is="'currentView'" />

B <component :is="currentView" />

C <component is="currentView" />

D <component :is="currentView()" />

💡 Hint

Dynamic component requires binding the is attribute to a variable.

Option B correctly binds is to the variable currentView using :. Option B treats it as a string literal. Option B binds to the string 'currentView' literally. Option B tries to call currentView as a function which is invalid.

🔧 Debug

advanced

Why does this Vue 3 dynamic list not update on state change?

Given this component:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="addItem">Add Item</button>
</template>

<script setup>
import { reactive } from 'vue'
const items = reactive([
  { id: 1, name: 'One' },
  { id: 2, name: 'Two' }
])
function addItem() {
  items.push({ id: 3, name: 'Three' })
}
</script>

Clicking 'Add Item' does not update the list. What is the cause?

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="addItem">Add Item</button>
</template>

<script setup>
import { reactive } from 'vue'
const items = reactive([
  { id: 1, name: 'One' },
  { id: 2, name: 'Two' }
])
function addItem() {
  items.push({ id: 3, name: 'Three' })
}
</script>

A Using reactive on an array does not track push mutations properly; use ref([]) instead.

B The addItem function is not bound to the component instance.

C The key attribute is missing, so Vue cannot track list items.

D The items array is not initialized correctly; it should be a plain array.

💡 Hint

Think about how Vue tracks changes in arrays with reactive vs ref.

Vue 3's reactive does not track array mutation methods like push properly. Using ref([]) and updating items.value is the correct approach to make array mutations reactive.

🧠 Conceptual

expert

What is the main benefit of using <Suspense> in Vue 3 dynamic rendering?

Vue 3 introduces the <Suspense> component. What is its primary purpose when rendering dynamic components?

A It disables reactivity temporarily to improve performance.

B It automatically caches all dynamic components for faster rendering.

C It forces all child components to render synchronously to avoid flicker.

D It allows showing fallback content while async components or data are loading.

💡 Hint

Think about user experience when waiting for slow components.

<Suspense> lets you display fallback UI (like a loading spinner) while waiting for async components or data to load, improving perceived performance and user experience.