Recursive components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this recursive Vue component render?

Consider a Vue 3 recursive component that renders a nested list of items. What will be the rendered output for the given data?

Vue

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

<script setup>
import { defineProps } from 'vue'
const props = defineProps({ items: Array })
</script>

A <ul><li>Fruit<ul><li>Apple</li><li>Banana</li></ul></li><li>Vegetables</li><li>Carrot</li></ul>

B <ul><li>Fruit</li><li>Apple</li><li>Banana</li><li>Vegetables</li><li>Carrot</li></ul>

C <ul><li>Fruit<ul><li>Apple<ul></ul></li><li>Banana<ul></ul></li></ul></li><li>Vegetables<ul><li>Carrot<ul></ul></li></ul></li></ul>

D <ul><li>Fruit<ul><li>Apple</li><li>Banana</li></ul></li><li>Vegetables<ul><li>Carrot</li></ul></li></ul>

💡 Hint

Think about how the component calls itself only when children exist, nesting the lists.

The component renders a nested unordered list. Each item with children renders a nested <ul> inside its <li>. Option D correctly shows this nested structure.

📝 Syntax

intermediate

Which option correctly registers a recursive component in Vue 3?

You want to create a recursive component named 'TreeNode' that calls itself inside its template. Which registration method is correct?

Vue

<template>
  <div>
    <TreeNode v-if="node.children" :node="child" v-for="child in node.children" :key="child.id" />
    <span>{{ node.name }}</span>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({ node: Object })
// How to register TreeNode recursively?
</script>

A const TreeNode = defineComponent({ name: 'TreeNode', /* no components registration needed */ })

B const TreeNode = defineComponent({ name: 'TreeNode', components: { 'TreeNode': TreeNode }, /* ... */ })

C const TreeNode = defineComponent({ name: 'TreeNode', components: { TreeNode }, /* ... */ })

D const TreeNode = defineComponent({ name: 'TreeNode', components: { TreeNode: () => import('./TreeNode.vue') }, /* ... */ })

💡 Hint

Vue 3 allows a component to call itself by name without explicit registration inside components.

In Vue 3, a component can recursively call itself by its own name without needing to register itself inside the components option. So no explicit registration is needed.

🔧 Debug

advanced

Why does this recursive Vue component cause a maximum call stack exceeded error?

Given this recursive component code, why does it crash with a maximum call stack exceeded error?

Vue

<template>
  <div>
    <RecursiveComp v-if="true" />
  </div>
</template>

<script setup>
import RecursiveComp from './RecursiveComp.vue'
</script>

A The component is missing a key attribute in v-for causing infinite loops.

B The component calls itself unconditionally without a base case to stop recursion.

C The import statement causes circular dependency leading to stack overflow.

D Vue 3 does not support recursive components by default.

💡 Hint

Think about what stops recursion in recursive components.

The component calls itself every time without any condition to stop, causing infinite recursion and stack overflow.

❓ state_output

advanced

What is the value of 'count' after clicking the button twice in this recursive Vue component?

This recursive component increments a count state on button click. What is the final count after two clicks?

Vue

<template>
  <div>
    <button @click="increment">Click me</button>
    <p>Count: {{ count }}</p>
    <RecursiveCounter v-if="depth < 2" :depth="depth + 1" />
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({ depth: { type: Number, default: 0 } })
const count = ref(0)
function increment() {
  count.value++
}
</script>

A Count is 2 because each component instance has its own count state.

B Count is 0 because the button does not trigger increment correctly.

C Count is 4 because clicks propagate to all recursive instances.

D Count is 1 because only the root component increments count.

💡 Hint

Each recursive component instance has its own separate state.

Each recursive instance has its own count ref. Clicking the button in one instance only increments that instance's count. After two clicks on the root button, count is 2 for that instance.

🧠 Conceptual

expert

How does Vue 3 handle recursive component resolution internally?

Which statement best describes how Vue 3 resolves recursive components during rendering?

A Vue 3 resolves recursive components only if they are imported dynamically with defineAsyncComponent.

B Vue 3 forbids recursive components to prevent infinite loops at compile time.

C Vue 3 uses the component's name to resolve itself recursively without explicit registration in components option.

D Vue 3 requires recursive components to be globally registered to resolve recursion.

💡 Hint

Think about how Vue 3 improved recursive component support compared to Vue 2.

Vue 3 allows a component to call itself recursively by its own name without needing explicit registration or global registration. This simplifies recursive component usage.