(1/20) Which statement about 'ref sugar' (the $ref syntax) in Vue 3 is TRUE?

---

• It is enabled by default in all Vue 3 builds
• It is an experimental reactivity transform that simplifies ref usage, requiring an opt-in config
• It removes the need for watchers entirely
• It only works for props, not local variables

(2/20) Which advanced pattern might you use if you want a child component to conditionally override watchers from a parent-provided object in Vue 3, merging or disabling them at runtime?

---

• No approach to override parent watchers
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• If the parent uses provide() to share watchers or reactivity, the child could inject the references, defineEffectScope or create new watchers, selectively stopping or overriding the parent watchers. This is quite hacky

(3/20) In Vue 3, if you create multiple watchers for the same reactive property, which statement best describes how they run?

---

• They run in parallel, order is not strictly guaranteed among watchers for the same source
• Only the first watcher triggers; subsequent watchers are ignored
• They run strictly in the order they are declared in code
• Vue merges watchers into one callback

(4/20) Which directive might you use if you want a chunk of template code to only be processed on the client side but ignored during server-side rendering (SSR)?

---

• v-html
• v-once
• v-if="typeof window !== 'undefined'" or a similar runtime check
• v-if="false"

(5/20) How do watchers in a composable handle concurrency if multiple components use that composable simultaneously in Vue 3?

---

• Each component call to the composable spawns new watchers tied to that component instance's lifecycle, so concurrency is separate per component
• They share a single watch instance
• Use watchers in main.js for concurrency watchers only
• Impossible to define watchers in composables for multiple components

(6/20) If you want to create a Vue 3 SSR application manually (without Nuxt), which package do you typically use?

---

• @vue/server-renderer
• Only watchers-based SSR is possible
• vue-i18n
• vue-virtual-scroller

(7/20) How might you define watchers for concurrency if you need to respond to user input changes across multiple fields in a single callback in a Vue 3 SFC using <script setup>?

---

• Import watch from 'vue'; watch([() => fieldA.value, () => fieldB.value], ([newA, newB], [oldA, oldB], onInvalidate) => { ... concurrency logic ... })
• Use defineExpose for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Impossible to watch multiple fields in script setup

(8/20) How do you define watchers for concurrency in an async method within the Composition API if you want to run code each time a certain property changes, but also handle cancellation?

---

• Within watch(() => property, async (newVal, oldVal, onInvalidate) => { ... onInvalidate(() => cancelTask()) }) is the standard concurrency pattern
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Impossible to define watchers in an async method

(9/20) Which statement about shallowRef is true in Vue 3 if you assign an object to shallowRef.value and mutate that object’s nested properties?

---

• All nested changes are tracked
• shallowRef is identical to computed
• Mutations to nested fields do not trigger updates, only replacing the entire .value reference does
• Use watchers in main.ts only

(10/20) Which method is used to capture unhandled errors globally in a Vue 3 app if they are not handled by onErrorCaptured in a component?

---

• app.config.errorHandler = (err) => {...}
• app.config.globalError()
• Errors cannot be caught globally in Vue 3
• Vue.useGlobalError((err) => {...})

(11/20) Which approach might you use if you want to define watchers for concurrency that combine multiple fields in a single callback, and also track an external store state in Vue 3?

---

• watch([() => fieldA.value, () => fieldB.value, () => store.someValue], ([newA, newB, newStore], [oldA, oldB, oldStore], onInvalidate) => { ... concurrency logic ... })
• Use watchers in main.js for concurrency watchers only
• Impossible to watch multiple refs plus store
• Use defineProps for concurrency watchers

(12/20) How do you define watchers in a child component that references data from an external library instance passed via props, ensuring reactivity in Vue 3 if that library object is not reactive?

---

• Use defineProps for concurrency watchers
• Impossible to watch external library objects
• If the library object is not reactive, watchers won’t track changes unless you wrap it in reactive or pass it as a ref. Alternatively, you might poll for changes. markRaw means it’s excluded from reactivity entirely
• Use watchers in main.js for concurrency watchers

(13/20) In a single-file component, which section is used to declare custom blocks recognized by tooling or plugins (e.g., <docs> or <i18n>)?

---

• Any custom top-level section, e.g. <i18n>, can exist for specialized tooling
• <script>
• <config>
• <template>

(14/20) Which is a valid reason to define watchers in a Vue 3 SSR environment, even though SSR typically runs once per request?

---

• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• No reason: watchers do not function at all in SSR
• You might want to run a synchronous effect if you’re just leveraging reactivity in a single pass, though usually it’s simpler to do direct logic in onServerPrefetch. Watchers are rarely needed in SSR

(15/20) Which approach might you take if you want a single typed route param to represent either a numeric ID or a string slug in a Vue 3 app with TypeScript, but watchers must handle both conversions?

---

• Use defineProps for concurrency watchers
• Impossible to define watchers for multi-type params
• Use watchers in main.js for concurrency watchers only
• Use watchers that parse route.params.myParam, e.g. let value = isNaN(+param) ? param : +param, so watchers handle both numeric and string forms. In TS, union the type or define a custom parse logic

(16/20) Which advanced approach can you use to intercept an error from a child's serverPrefetch logic in Vue 3 SSR, potentially returning a custom SSR error page?

---

• No approach to intercept serverPrefetch errors
• Use defineProps for concurrency watchers
• Implement onErrorCaptured in the parent or a global SSR error handler. If a child onServerPrefetch throws, you can catch it, then decide how to handle or rethrow for a specialized SSR error template
• Use watchers in main.js for concurrency watchers

(17/20) How do you define watchers if you want to track changes to an array of objects for concurrency, but only reassign the entire array if an item changes in Vue 3?

---

• You might do a deep watch if you want each item’s changes. Or if you only want top-level reassignments, use a shallowRef plus reassign the array whenever an item changes, forcing watchers to see a new reference
• Use defineProps for concurrency watchers
• Impossible to track array of objects in Vue 3
• Use watchers in main.js for concurrency watchers only

(18/20) Which approach might you use to pass dynamic attributes (e.g., aria-label, role) to a child component’s root element if they are not declared as props?

---

• You must define them in defineProps or they’re dropped
• Vue 3 drops unknown attributes entirely
• Rely on watchers for each attribute
• Use $attrs and inheritAttrs (default true), so unknown attributes are automatically placed on the child’s root

(19/20) Which lifecycle hook in Vue 3 is especially useful for performing asynchronous tasks before server-side rendering completes?

---

• onServerPrefetch
• SSR does not allow lifecycle hooks
• onBeforeMount
• onServerMounted

(20/20) How do you define watchers in the Options API for concurrency if you want to handle an async method that cancels on new changes, in Vue 3?

---

• Watchers in Options API can still be define (newVal, oldVal) { ... }, but to handle concurrency, you must migrate to Composition watchers
• Use watchers in main.js for concurrency watchers only
• Impossible to define concurrency watchers in Options API
• No built-in concurrency cleanup is offered in Options API watchers, so you’d manage cancellation logic manually (like a local token). On the next change, you cancel the prior request if not done yet

Submit