Custom v-model on components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output when using a custom v-model with a different prop name?

Consider a Vue 3 component MyInput that uses modelValue as the prop and emits update:modelValue. If you use v-model:customValue on MyInput but the component only listens to modelValue, what will be the displayed value?

Vue

<template>
  <MyInput v-model:customValue="text" />
  <p>{{ text }}</p>
</template>

<script setup>
import { ref } from 'vue'
import MyInput from './MyInput.vue'
const text = ref('hello')
</script>

<!-- MyInput.vue -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
const props = defineProps({ modelValue: String })
</script>

A The input is disabled and does not show any value.

B The input shows empty and typing updates 'text' correctly.

C The input shows 'hello' and typing updates 'text' correctly.

D The input shows empty but typing does not update 'text' because 'customValue' is not handled.

💡 Hint

Check if the prop and event names match the v-model argument.

Using v-model:customValue expects the component to accept a prop named customValue and emit update:customValue. Since MyInput only uses modelValue and update:modelValue, the modelValue prop is not bound, so the input shows empty but changes do not update the parent.

📝 Syntax

intermediate

Which option correctly defines a custom v-model with a different prop and event in Vue 3?

You want to create a component that uses v-model:checked where the prop is checked and the event is update:checked. Which code snippet correctly defines this?

A defineProps({ checked: Boolean }); emits: ['update:checked']

B defineProps({ modelValue: Boolean }); emits: ['update:checked']

C defineProps({ checked: Boolean }); emits: ['update:modelValue']

D defineProps({ modelValue: Boolean }); emits: ['update:modelValue']

💡 Hint

The prop and event names must match the v-model argument.

For v-model:checked, the component must accept a prop named checked and emit update:checked. Option A matches this pattern.

❓ state_output

advanced

What is the value of count after clicking the button twice in this custom v-model component?

Given the parent uses v-model:count with Counter component that emits update:count on button click, what is the final value of count?

Vue

<template>
  <Counter v-model:count="count" />
  <p>{{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Counter from './Counter.vue'
const count = ref(0)
</script>

<!-- Counter.vue -->
<template>
  <button @click="$emit('update:count', count + 1)">Increment</button>
</template>

<script setup>
const props = defineProps({ count: Number })
</script>

A 0

B 1

C NaN

D 2

💡 Hint

Check if the component uses the prop value correctly inside the emit.

The count in the template is undefined because const props = defineProps() does not expose props directly to the template scope. Thus, count + 1 is NaN, emitted on each click, so the parent count becomes NaN.

🔧 Debug

advanced

Why does this custom v-model component not update the parent value on input?

Analyze the code below. The parent uses v-model:inputValue but typing in the input does not update the parent. What is the cause?

Vue

<template>
  <input :value="inputValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
const props = defineProps({ inputValue: String })
</script>

A The emitted event name 'update:modelValue' does not match the prop 'inputValue'.

B The input element should use v-model instead of :value and @input.

C The prop 'inputValue' is not reactive in the parent component.

D The component is missing a default value for 'inputValue'.

💡 Hint

Check if the event name matches the prop name for the custom v-model.

For v-model:inputValue, the component must emit update:inputValue. Emitting update:modelValue breaks the binding.

🧠 Conceptual

expert

How does Vue 3 internally handle multiple custom v-model bindings on a single component?

When a component uses multiple v-model bindings like v-model:title and v-model:description, how does Vue 3 manage these bindings internally?

A Vue only supports one v-model per component; multiple bindings cause runtime errors.

B Vue creates separate props and emits for each model, matching <code>title</code> and <code>description</code> with <code>update:title</code> and <code>update:description</code> events respectively.

C Vue merges all v-model bindings into a single prop and event named <code>modelValue</code> and <code>update:modelValue</code>.

D Vue uses a global store to sync all v-model bindings across components automatically.

💡 Hint

Think about how Vue matches prop names and event names for each v-model argument.

Vue 3 supports multiple v-model bindings by creating separate props and events for each argument. For example, v-model:title uses prop title and event update:title, and similarly for description.