(1/20) If you create multiple watchers referencing the same property with flush: 'sync' in Vue 3, how does the system handle the order of these synchronous callbacks in a single flush cycle?

---

• Impossible to define multiple flush: 'sync' watchers on one property
• The order among watchers with flush: 'sync' is not strictly guaranteed if they watch the exact same property; they run in the same microtask batch
• They’re guaranteed to run in the order declared in code
• They are forcibly merged into one callback

(2/20) Which best describes watchPostEffect() in Vue 3?

---

• No difference from watch(() => ..., ...)
• It is identical to watchEffect(), triggered before DOM patching
• A variant of watchEffect that runs the effect after the DOM has been updated (flush: 'post')
• It forcibly re-renders the component

(3/20) Which approach might you use if you need watchers in a custom defineRenderer-based environment, e.g. rendering to a game engine UI, ensuring concurrency logic merges user interactions with reactivity in Vue 3?

---

• You rely on the same reactivity + watchers from @vue/runtime-core. In your custom createRenderer, you handle how nodes are created/updated. The watchers still run. You might add concurrency logic for user interactions in your host environment. This is advanced custom render usage
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Impossible to define watchers outside web or native environment

(4/20) Which advanced pattern can help if you want to deeply track a large object in some watchers but track only reference changes in others, in the same Vue 3 component?

---

• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Impossible to define partial watchers for the same object
• Use shallowRef for one reference-based watch and a separate reactive or deep watch for the other. Or create two references: shallowRef for reference watchers, reactive for deep watchers, pointing to the same data in different ways

(5/20) What is the main purpose of script setup’s top-level await in Vue 3?

---

• To block the entire page rendering until data is loaded
• To allow asynchronous imports or data fetching before the component is compiled
• Top-level await is not allowed in Vue 3’s script setup
• To remove the need for watchers

(6/20) When would you use shallowRef instead of ref in Vue 3?

---

• If you need deep reactivity for objects or arrays
• If you want watchers to run on every property change inside .value
• shallowRef is only for DOM elements
• If you only want reactivity for the ref's .value changes, but not for nested properties of that .value

(7/20) When using the Composition API, how do you define a computed property that requires both a getter and a custom setter?

---

• This is no longer possible in Vue 3
• Use two separate computed() calls
• watchEffect(get, set)
• computed({ get: ..., set: ... })

(8/20) How can you define a ref that is updated only when you assign a new object, ignoring property changes within the object in Vue 3?

---

• Such behavior is not possible in Vue 3
• Use watchers for every property in the object
• Use a shallowRef(...) for that object
• Use markRaw to make the entire object non-reactive

(9/20) How do you ensure that your watchers in Vue 3 do not trigger multiple times if the reactive property changes in quick succession (debouncing)?

---

• Set flush: 'sync' in watch options
• Use defineEmits in watchers
• Vue automatically debounces watchers
• Wrap the callback in a debouncing function (e.g. lodash.debounce) or manually manage a timer inside the watch callback

(10/20) How might you define watchers for concurrency if you want to track route.params.id plus a local ref called activeTab in one callback in Vue 3?

---

• Use defineExpose for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• watch([() => route.params.id, () => activeTab.value], ([newId, newTab], [oldId, oldTab], onInvalidate) => { ... concurrency ... })
• Impossible to watch route and local ref together

(11/20) In Vue 3’s createRenderer API for custom renderers, which parameters are generally required?

---

• Patch functions for createElement, patchProp, insert, remove, etc.
• An HTML file path and a plugin name
• A single JSON object with a 'render' method only
• No parameters; it uses the DOM by default

(12/20) If you have a custom directive that needs to run some logic when the bound element is inserted into the DOM in Vue 3, which directive hook is appropriate?

---

• beforeMount()
• mounted(el, binding, vnode, prevVnode)
• unmounted()
• updated()

(13/20) What is the correct method to register a custom element built with Vue 3, so it is recognized as a standard web component?

---

• Call customElements.define('tag-name', defineComponent)
• Import the component in main.js and declare it in a watchers array
• Use defineCustomElement(...) to create a custom element, then register it using window.customElements.define('my-tag', MyCustomElement)
• Vue 3 does not support custom elements

(14/20) How do you watch changes to a nested object property in a Vue 3 reactive object if you only want to track that specific property, not the entire object?

---

• Use toRef(myObj, 'someNestedKey') and then watch that ref
• Use watch(() => myObj, ...) with deep: true
• Impossible unless you mutate the entire object each time
• Use defineEmits in the child component

(15/20) Which statement about <script setup> re-exporting components is TRUE?

---

• Components cannot be re-exported from a Single File Component
• All exports must occur inside the defineExpose() call
• You must define a custom directive for re-export
• You can re-export default from a child component using normal ES module syntax outside <script setup>

(16/20) When configuring SSR, what is 'hydration' in the context of Vue 3?

---

• A special way to inject CSS into the DOM
• Only relevant for data watchers
• A process of merging server-rendered HTML with client-side reactivity once the JavaScript loads
• A stage of dynamically lazy-loading route components

(17/20) When might you choose shallowReactive instead of reactive in Vue 3?

---

• If you need to react to changes in all nested objects deeply
• Vue 3 does not have a shallowReactive function
• shallowReactive is the same as markRaw
• If you only need to react to assignments or top-level property changes, ignoring deep nesting for performance reasons

(18/20) Which statement about watchers referencing multiple array items is correct if you pass a function returning arr.map(...) in Vue 3?

---

• If you do watch(() => arr.value.map(i => i.someProp), callback), each re-render re-checks the mapped array. If an item’s someProp changes, the array changes, triggering watchers
• Impossible to watch arrays via map
• Use watchers in main.js for concurrency watchers only
• No approach for watchers referencing map calls

(19/20) Which advanced SSR technique in Vue 3 helps you pre-fetch data for nested route components, ensuring minimal repeated queries and easy concurrency management?

---

• onServerPrefetch hooks in nested components, combined with a shared SSR context to avoid duplicate queries if multiple components request the same resource
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• No approach for nested SSR prefetch in Vue 3

(20/20) How do you define typed props in a TypeScript-based Vue 3 Single File Component if you do not want to use the macro defineProps?

---

• Rely on globalProperties type definitions only
• Props cannot be typed without defineProps
• Use defineComponent from 'vue' and specify props with TS interfaces or a props object
• Use watchers for type checks

Submit