Question 1

How does Vue 3 reactivity work?

Accepted Answer

Proxies track property access during render and trigger updates when reactive data changes. ref/reactive/computed form the core. Dependency tracking is automatic when values are read in reactive contexts.

Question 2

ref vs reactive — when each?

Accepted Answer

ref wraps any value (.value); reactive wraps objects. Prefer ref for primitives and often for consistency. Destructuring reactive breaks reactivity unless toRefs. Templates auto-unwrap refs.

Question 3

What does computed do?

Accepted Answer

Creates a cached derived value that recomputes when dependencies change. Prefer computed over methods in templates for derived state. Writable computed possible but use carefully.

Question 4

watch vs watchEffect?

Accepted Answer

watch is explicit about sources; watchEffect auto-tracks dependencies and runs immediately. Use watch when you need old/new values or lazy control. Avoid heavy async without cleanup.

Question 5

Why does destructuring props break reactivity and how do you fix it?

Accepted Answer

Destructuring loses the reactive proxy link; use toRefs/toRef or access props.x. Common footgun in setup. ESLint plugins can help.

Question 6

shallowRef / shallowReactive — when?

Accepted Answer

Track only .value / top-level changes for large immutable replacements. Useful for performance with big data structures you replace wholesale.

Question 7

What is markRaw?

Accepted Answer

Marks an object so Vue never makes it reactive—useful for third-party class instances. Prevent Proxy wrapping overhead/bugs with external libs.

Question 8

Triggering updates with Map/Set?

Accepted Answer

Use reactive collections carefully; prefer replacing or Vue-aware mutation patterns. Know which mutations are tracked. Prefer arrays of objects for simple lists.

Question 9

effectScope — what is it for?

Accepted Answer

Groups effects so they can be stopped together—useful in advanced composables/libraries. Helps avoid leaks when dynamically creating watchers.

Question 10

How do you debug unexpected re-renders/updates?

Accepted Answer

Vue DevTools timeline, check reactive sources, avoid creating new reactive objects each render unnecessarily. Watchers logging help. Ensure keys are stable in v-for.

Question 11

Readonly proxies — why use readonly()?

Accepted Answer

Expose reactive state to consumers without allowing mutation. Good for store public APIs. Mutations should go through actions.

Question 12

Architecture: model a complex form with Vue reactivity.

Accepted Answer

Use reactive form state + computed validity; watchers for autosave; composables per section. Avoid deep watchers when computed suffices. Debounce remote sync.

Reactivity Vue.js Interview Questions

Other Vue.js interview topics