Question 1

How do props work in Vue 3?

Accepted Answer

Declared via defineProps; one-way down from parent to child; validated/typed optionally. Mutating props is an anti-pattern—emit events or use v-model. Defaults via withDefaults.

Question 2

How do emits work?

Accepted Answer

declare via defineEmits; child triggers events; parent listens with @event. Prefer explicit emit declarations for documentation and validation. Payload typing matters in TS.

Question 3

How does v-model work on components?

Accepted Answer

Default model is modelValue prop + update:modelValue emit; can define multiple v-models. Enables two-way binding ergonomics while staying explicit under the hood.

Question 4

Props validation — runtime vs TypeScript?

Accepted Answer

Runtime props options validate in dev; TS validates at compile time—use both thoughtfully. Runtime validators help JS consumers. Don't rely on runtime alone in TS apps.

Question 5

Fallthrough attributes — what are they?

Accepted Answer

Non-prop attributes fall onto the root element unless inheritAttrs: false. Important for wrapper components—bind $attrs intentionally to the right element.

Question 6

When to use prop drilling vs provide/inject vs Pinia?

Accepted Answer

Shallow trees: props; sparse deep concerns: provide/inject; broad shared state: Pinia. Prefer the simplest that stays clear.

Question 7

Boolean props casting quirks?

Accepted Answer

Presence of a boolean prop without value becomes true; be careful with string 'false'. Prefer explicit :flag="false". Know attribute fallthrough behavior.

Question 8

Design events for a complex picker component.

Accepted Answer

Emit update:modelValue, change with full payload, and blur/focus when a11y needs; document payloads. Don't emit redundant events. Keep names consistent with Vue style guide.

Question 9

one-way data flow — why does Vue emphasize it?

Accepted Answer

Predictable updates: parents own state; children request changes via events. Two-way binding is sugar over this. Mutating props breaks the model.

Question 10

How do you type v-model with TypeScript?

Accepted Answer

Type modelValue and update:modelValue emit; or use defineModel in supported Vue versions. defineModel simplifies boilerplate—know your Vue version.

Props & Emits Vue.js Interview Questions

Other Vue.js interview topics