(1/20) Which statement best describes the difference between watch() and watchEffect() regarding how dependencies are tracked in Vue 3?

---

• watch() automatically tracks all used reactive variables; watchEffect() requires an explicit list of dependencies
• They have no difference in how dependencies are tracked
• watchEffect() automatically tracks all used reactive variables; watch() requires specifying a source or function to track
• They both always require an explicit array of dependencies

(2/20) When you build a custom renderer for Vue 3 using createRenderer, which configuration is crucial for hooking into platform-specific operations?

---

• You pass an object with methods like insert, patchProp, createElement, etc., so Vue knows how to render to that platform
• No special config, just watchers in main.js
• A watchers array must be provided
• Use defineExpose for each platform method

(3/20) How can you manage concurrency if your watch() callback starts an async operation that should be canceled if the watched source changes again quickly?

---

• Impossible to handle concurrency in watchers
• Use defineProps to define concurrency
• Return a cleanup function inside watch’s callback via onCleanup or onInvalidate callback, canceling the previous request
• Use watchers in main.js for concurrency

(4/20) What is the primary purpose of the watchPostEffect() function in Vue 3?

---

• It defers effect execution until after the DOM is updated
• It is identical to watchEffect()
• It runs its callback immediately before the component mounts
• It only works for watching arrays, not objects

(5/20) Which advanced technique allows you to preserve watchers and reactivity if you clone an existing component instance in Vue 3, e.g. for duplicating dynamic components with state?

---

• Impossible to clone a component instance with watchers
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• You might attempt to reuse an effect scope or copy the reactive state references, but Vue does not provide an official instance clone. Typically, you re-instantiate the component with the same state or a shared store

(6/20) Which advanced feature of the Vue 3 reactivity system allows you to mark a nested object so it will not become reactive?

---

• noReact
• shallowRef
• readonlyDeep
• markRaw

(7/20) When would you use the watchPostEffect() function in Vue 3?

---

• When you need to run the effect before DOM patch
• It is identical to watchEffect with no differences
• When watchers are disabled globally
• When you want the effect to run after the DOM patch (i.e. flush: 'post'), useful for reading updated DOM info

(8/20) Which function in Vue 3 can make a reactive property read-only so mutations produce warnings in the console?

---

• shallowRef()
• readonly()
• markRaw()
• useRoute()

(9/20) Which approach would you take to define a watch that runs after the DOM patch cycle in Vue 3 for post-render checks?

---

• Use watchers with flush: 'post'
• Use watchers with immediate: true
• No approach for post-patch watchers
• Use watchers with deep: true

(10/20) How might you define watchers for concurrency in a parent that also triggers watchers in a child if the child is teleported in Vue 3?

---

• Teleport does not affect watchers; parent watchers trigger if parent data changes, child watchers if child props or data changes, location in DOM is irrelevant
• Use watchers in main.js for concurrency watchers only
• Teleport breaks watchers in children
• Use defineProps for concurrency watchers

(11/20) Which Composition API hook is specifically designed for server-side data prefetching in Vue 3?

---

• SSR is not supported in Vue 3
• onBeforeSSR
• onSSRComplete
• onServerPrefetch

(12/20) How do you define watchers for concurrency if a user can queue multiple data changes in batch mode, then a single final commit triggers all watchers at once in Vue 3?

---

• Use watchers in main.js for concurrency watchers only
• Impossible to batch watchers
• Use defineProps for concurrency watchers
• One pattern is to store changes in a temporary data structure, only applying them in one assignment. The watchers see only the final assignment, letting you do concurrency in that single watch callback. Or define an effect scope that merges each partial change but defers watchers until you forcibly flush. This is advanced usage

(13/20) When setting up an application with SSR in Vue 3, which library or package is often used in conjunction with a bundler to handle server entry and client entry?

---

• vue-animations plugin
• Vite (or Webpack) with @vue/server-renderer or a framework like Nuxt 3 that wraps these details
• vue-i18n
• vue-virtual-scroller

(14/20) If you want to define an event within defineEmits that must have a certain payload type in TypeScript, how do you do it in Vue 3?

---

• defineEmits only allows string events with no payload definition
• Pass a type or interface, e.g. const emit = defineEmits<{ (e: 'save', payload: SaveData): void }>()
• The payload cannot be typed in Vue 3
• Use watchers to ensure the payload is correct

(15/20) Which new Vue 3 feature can help you automatically unwrap refs in the template so you don’t need to use '.value'?

---

• refAutoUnwrap()
• Automatically unwrapped by default in composition functions
• script setup
• No new feature for this; you always need .value

(16/20) How do you trigger manual component updates in Vue 3, if needed?

---

• By reassigning the reactive variable
• Vue 3 has removed manual update triggers
• By using forceReactive() in Composition API
• By calling app.$forceUpdate()

(17/20) How do you pass dynamic route definitions at runtime in Vue 3, for example if routes are fetched from a server?

---

• Use only an external library for dynamic routing
• Vue Router does not allow dynamic routes
• You can call router.addRoute() programmatically after createRouter() is set up
• Place them in onMounted() of App.vue with watchers

(18/20) Which feature in Vue 3 helps you create typed props more seamlessly in TypeScript?

---

• Prop Transformers
• DefineProps() macro in <script setup>
• Automatic prop type inference in the template
• v-ts directive

(19/20) How might you unify concurrency watchers for typed events in defineEmits if each event triggers a different async operation, but you want a global cancelation if a new event arrives in Vue 3?

---

• No approach to unify concurrency in defineEmits
• Use defineProps for concurrency watchers
• Inside the component, you can store a shared concurrency token or effect scope for all events. Each defineEmits event triggers watchEffect or a callback with onInvalidate. If a new event arrives, you invalidate the previous operation. This is advanced multi-event concurrency logic
• Use watchers in main.js for concurrency watchers only

(20/20) How do you trigger concurrency control in watchers, e.g. canceling an API call if a new change happens in Vue 3?

---

• Use defineExpose in the watchers
• Use v-if on the API call
• Use the onCleanup (or onInvalidate) callback inside watch() or watchEffect() to abort previous async tasks
• You cannot handle concurrency in watchers

Submit