Props drilling problem in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be displayed by the deepest child component?

Consider a Vue 3 app where a prop is passed through multiple nested components. What text will the deepest child component render?

Vue

/* Parent.vue */
<template>
  <ChildA :message="parentMessage" />
</template>
<script setup>
const parentMessage = 'Hello from Parent'
</script>

/* ChildA.vue */
<template>
  <ChildB :message="message" />
</template>
<script setup>
const props = defineProps({ message: String })
const message = props.message
</script>

/* ChildB.vue */
<template>
  <ChildC :message="message" />
</template>
<script setup>
const props = defineProps({ message: String })
const message = props.message
</script>

/* ChildC.vue */
<template>
  <p>{{ message }}</p>
</template>
<script setup>
const props = defineProps({ message: String })
const message = props.message
</script>

A Hello from Parent

B Error: message is not defined

C undefined

D Empty paragraph with no text

💡 Hint

Trace how the message prop is passed down through each component.

The message prop is passed from Parent.vue to ChildA.vue, then to ChildB.vue, and finally to ChildC.vue. Each component correctly receives and passes the prop, so the deepest child renders the original string.

❓ state_output

intermediate

What is the value of the prop in the grandchild after update?

In this Vue 3 example, the parent updates the prop value after 1 second. What will the grandchild component display after the update?

Vue

<template>
  <ChildA :text="parentText" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
const parentText = ref('Initial')
onMounted(() => {
  setTimeout(() => {
    parentText.value = 'Updated'
  }, 1000)
})
</script>

<!-- ChildA.vue -->
<template>
  <ChildB :text="text" />
</template>
<script setup>
const props = defineProps({ text: String })
const text = props.text
</script>

<!-- ChildB.vue -->
<template>
  <p>{{ text }}</p>
</template>
<script setup>
const props = defineProps({ text: String })
const text = props.text
</script>

A Initial, then changes to Updated after 1 second

B Always shows Initial, no change

C Always shows Updated immediately

D Throws an error after 1 second

💡 Hint

Consider how Vue's reactivity works with props and refs.

The parent uses a reactive ref for parentText. When it updates after 1 second, the new value flows down through props to ChildB, updating the displayed text.

🔧 Debug

advanced

Why does the child component not receive the prop value?

Given this Vue 3 code, the child component shows an empty paragraph instead of the expected prop value. What is the cause?

Vue

<template>
  <Child :msg="message" />
</template>
<script setup>
const message = 'Hello'
</script>

<!-- Child.vue -->
<template>
  <p>{{ msg }}</p>
</template>
<script setup>
const props = defineProps({ msg: String })
const msg = props.msg
</script>

A Missing import of Child component in parent

B Template syntax error in child component

C Prop name mismatch: parent passes 'msg' but child expects 'message'

D Using <script setup> disables props

💡 Hint

Check the prop names used in parent and child components.

The parent passes a prop named msg, but the child defines and expects a prop named message. This mismatch causes msg to be undefined in the child template.

🧠 Conceptual

advanced

What is a main drawback of props drilling in Vue apps?

Props drilling means passing props through many nested components that do not use them directly. What is a key problem caused by this pattern?

A It causes Vue to throw runtime errors

B It makes components tightly coupled and harder to maintain

C It disables reactivity in child components

D It prevents components from rendering

💡 Hint

Think about how passing props through many layers affects code clarity and maintenance.

Props drilling forces intermediate components to handle props they don't need, increasing coupling and making the app harder to maintain and refactor.

📝 Syntax

expert

Which option correctly avoids props drilling using Vue 3 features?

You want to share data deeply without passing props through many components. Which code snippet correctly uses Vue 3's provide/inject to achieve this?

Vue

/* Parent.vue */
<template>
  <ChildA />
</template>
<script setup>
import { provide, ref } from 'vue'
const sharedData = ref('Shared info')
provide('sharedKey', sharedData)
</script>

/* ChildC.vue */
<template>
  <p>{{ sharedData.value }}</p>
</template>
<script setup>
import { inject } from 'vue'
const sharedData = inject('sharedKey')
</script>

A Parent uses provide inside setup but does not import provide

B Parent uses provide with a ref; Child uses inject but accesses sharedData without .value

C Parent uses provide with a plain string; Child uses inject expecting a ref

D Parent uses provide with a ref; Child uses inject and accesses the ref value directly

💡 Hint

Remember that ref values need to be accessed with .value in Vue 3.

Using provide with a ref shares reactive data. The child must use inject and access the reactive value with .value to get the current data.