(1/12) When using watchers in Vue 3, how do you ensure the callback runs after the DOM has been updated if you need to measure newly rendered elements?

---

• Use watchers with deep: true
• Watchers always run post-update by default
• Use watchers with immediate: true
• Use watchers with flush: 'post'

(2/12) Which best describes the difference between watchEffect and watchPostEffect with respect to DOM updates in Vue 3?

---

• No difference: watchEffect is an alias for watchPostEffect
• watchEffect only runs once, while watchPostEffect runs repeatedly
• watchPostEffect only works with Teleport
• watchEffect runs before DOM patching, watchPostEffect runs after DOM patching (flush: 'post')

(3/12) Which statement is true regarding the reactivity transform (experimental) feature in Vue 3?

---

• It is enabled by default in all Vue 3 projects
• It allows you to write $ref, $computed, and $toRefs without explicit imports, turning them into standard Composition API calls
• It replaces the Composition API entirely
• It automatically imports reactive from vue in every file

(4/12) If you want to create a plugin that extends the router instance in Vue 3, how might you do it?

---

• Write an install function that receives the app, plus import the router. Then modify or add properties/methods on router before or after app.use(router)
• Use defineEmits for route properties
• Write watchers in main.js for concurrency
• Impossible to modify router instance in a plugin

(5/12) How might you reduce boilerplate when using TypeScript for both defineProps() and defineEmits() in a Vue 3 SFC?

---

• Use watchEffect to handle both props and emits
• Use a single defineComposable() macro for everything
• Vue 3 does not allow typed emits
• Use type imports or ambient declarations, so defineProps and defineEmits macros share the same interfaces

(6/12) When might you use markRaw on an object in Vue 3?

---

• To create watchers automatically
• If you want to exclude the entire object from reactivity (e.g., for a large external library instance or data structure)
• If you want to deeply track all changes in that object’s nested properties
• Vue 3 no longer supports markRaw

(7/12) Which advanced feature in Vue 3 allows you to create a typed .vue file as a custom element that is recognized by the browser as <my-tag> without needing a Vue environment?

---

• No approach for custom elements in Vue 3
• defineCustomElement from Vue 3.2+, turning SFCs into native Web Components
• Global watchers with defineProps
• defineExpose only

(8/12) Which statement best describes the role of the 'compiler-dom' package in the Vue 3 monorepo?

---

• It is a specialized compiler module that compiles templates into DOM-manipulating render functions
• It provides server-side rendering utilities
• It replaces vue-i18n for translation
• It manages watchers for all reactive data

(9/12) When using watchers for concurrency, how do you differentiate consecutive changes in Vue 3 if the watch callback doesn’t receive oldVal/newVal automatically (like watchEffect)?

---

• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers
• No approach to get oldVal in watchEffect
• Use watch(...) instead of watchEffect if you need oldVal, or track the prior value in a local variable manually inside watchEffect

(10/12) When you have a large form with many inputs, how can you manage this more efficiently in Vue 3 to prevent excessive re-renders?

---

• Wrap each input or group of inputs in a child component, controlling their own state or using shallow reactivity
• Use a deep watcher on the entire form object in a single component
• Disable reactivity using markRaw on every input
• Store all data as globalProperties on the app instance

(11/12) How do watchers behave if a property changes multiple times in the same flush cycle in Vue 3, e.g., count.value++ happens twice in a single sync operation?

---

• Vue merges synchronous changes into one final updated value for watchers in that flush, so watchers see the final state once unless you do flush: 'sync'
• Each change triggers a separate watcher callback with partial concurrency watchers
• No approach to handle multiple changes in a single flush
• Use watchers in main.js for concurrency watchers only

(12/12) Which plugin or approach might you use if you want to create typed blueprint for a Pinia store with multiple modules in Vue 3 + TypeScript?

---

• Use defineStore from Pinia, pass typed state and typed getters/actions as TypeScript generics or interfaces
• Use watchers for each store property
• Use defineExpose in the store file
• Pinia does not support multiple modules or TS

Submit