(1/12) In Vue 3, how do you ensure that a watcher for a ref triggers only after the DOM is updated, so you can access updated elements?

---

• Use watchPostEffect() explicitly
• Set 'immediate: true' on the watcher
• Watchers always run after DOM updates by default
• Use watch() with flush: 'post'

(2/12) When might you define watchers for concurrency in a large search form that triggers an API call each time the user changes multiple fields quickly in Vue 3?

---

• Impossible to handle concurrency for forms
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers
• If you want to cancel the previous API call in the callback’s onInvalidate whenever a new change arrives quickly, avoiding overlapping requests

(3/12) How can you manage concurrency for SSR data fetching in Vue 3 if multiple async tasks could overlap during a single request lifecycle?

---

• Use watchEffect in <script setup>
• Use defineProps with immediate watchers
• No approach is possible for concurrency in SSR
• Use onServerPrefetch plus an effect scope, and rely on custom cancellation tokens or a third-party library to handle overlapping requests

(4/12) Which approach might you use if a Vue 3 app needs to define multiple router instances for distinct parts of the page?

---

• Each router must have the same routes, so it’s pointless
• Create multiple calls to createRouter() and mount them on separate nested <router-view> elements
• Use watchers to handle each route instance
• Vue Router 4 does not allow multiple router instances

(5/12) When might you consider using a deep watcher (with { deep: true }) in Vue 3?

---

• To track only the top-level assignment
• All watchers are deep by default
• Deep watchers no longer exist in Vue 3
• To track every nested property change in a reactive object or array

(6/12) Which is the correct usage of watch() in Vue 3 to watch multiple sources in a single callback?

---

• watch(() => [myRef.value, anotherRef.value], ([newA, newB], [oldA, oldB]) => { ... })
• Use watchers array in main.js
• Impossible to watch multiple sources together
• watch(myRef, anotherRef, (newVal, oldVal) => { ... })

(7/12) How do you define watchers in a complex Pinia store that uses defineStore with setup syntax, ensuring watchers are only created if certain conditions are met?

---

• Use defineProps for concurrency watchers
• Impossible to conditionally define watchers in Pinia
• Inside the defineStore setup, you can conditionally call watch(...) if some environment or state condition is met, returning a stop function or referencing effect scopes. This is advanced usage but feasible
• Use watchers in main.js for concurrency watchers only

(8/12) Which statement about reactivity transform (using $ref, $computed) in Vue 3 is correct?

---

• It is an experimental feature that must be explicitly enabled in your build tooling
• It replaces ref() and computed() entirely in the core library
• It was removed in Vue 2.7 and not reintroduced
• It is mandatory for all Vue 3 projects

(9/12) Which advanced approach might you use if you want to integrate a Vue 3 composable in a non-Vue environment, purely for its reactivity logic, while hooking watchers for concurrency in a plain JS context?

---

• Impossible to use Vue’s reactivity outside Vue
• Use defineProps for concurrency watchers
• You can import @vue/reactivity or use the global reactivity APIs from 'vue', create effect scopes, watchers, etc. in pure JS. This is advanced usage, turning Vue’s reactivity into a standalone system
• Use watchers in main.js for concurrency watchers only

(10/12) In <script setup>, how do you define a local directive for the component without registering it globally?

---

• Define a const myDirective = { mounted(el, binding) { ... } } and apply it in the template with v-my-directive="...". (No extra registration needed in script setup)
• Use a separate defineDirective call in a watchers block
• script setup does not allow local directives
• You must do app.directive inside setup

(11/12) Which advanced pattern might you adopt if you want to deep-clone a reactive object for a snapshot in Vue 3, ignoring watchers but preserving a short-term 'frozen' copy of the data?

---

• Use watchers in main.js for concurrency watchers only
• No approach to clone reactive data
• Use defineProps for concurrency watchers
• Use a JSON.stringify/parse or a custom deep clone function, ignoring reactivity. This breaks watchers on the clone, making it a plain object snapshot. Then watchers remain on the original. It's advanced but common for 'undo' logic

(12/12) Which statement about the new static hoisting optimization in Vue 3 is correct?

---

• Static nodes are automatically detected and hoisted to reduce runtime overhead
• It requires manual annotation for each static node
• It has been removed in Vue 3 for performance reasons
• It is only applicable when using TypeScript

Submit