(1/20) Which statement about dynamic v-model arguments is correct in Vue 3?

---

• v-model no longer supports dynamic arguments in Vue 3
• They only work if you define an Options API created() hook
• They are declared with v-model:[someProp] on a child component, requiring a matching prop and event named 'update:someProp'
• They automatically define watchers for every property in the child

(2/20) Which statement about watchers in the Vue 3 Composition API is correct regarding their behavior during server-side rendering?

---

• They are skipped entirely in SSR, as watchers typically require a DOM or user interaction
• They run multiple times for each request in SSR
• They automatically queue server responses
• They break SSR unless flush: 'sync' is used

(3/20) Which option best describes how to handle deeply nested object changes in Vue 3 for performance concerns?

---

• Use shallowReactive or shallowRef for large objects if you don’t need deep reactivity, or break them into smaller reactive pieces
• Use watchers with deep: true on all nested objects
• Vue 3 cannot handle nested objects at all
• Use defineExpose for each nested property

(4/20) Which advanced feature can you use to implement auto-suspending nested subtrees if an error or pending state occurs in child components with <Suspense> in Vue 3?

---

• No approach for nested suspense fallback on error
• Use watchers in concurrency watchers mode only
• Use defineProps for concurrency watchers
• A nested <Suspense> can nest fallback states. Also, an error boundary (onErrorCaptured) can combine with <Suspense> to conditionally re-suspend or fallback. This is quite advanced and not a typical pattern

(5/20) Which approach ensures watchers in a composable do not conflict with watchers in the parent component if they watch the same reactive property in Vue 3?

---

• No approach to avoid conflicts; only the first watcher triggers
• Both watchers can exist, but concurrency is handled by flush timing. If you do concurrency logic, you must handle it in each watcher using onInvalidate
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers

(6/20) Which function in Vue 3 is used to manually create a custom renderer for targeting non-DOM environments?

---

• markRaw from 'vue'
• createRenderer from @vue/runtime-core
• defineExpose from <script setup>
• createCustomDOM

(7/20) How can you create a read-only version of a reactive object in Vue 3, preventing external modifications?

---

• Use readonly(someReactiveObject) from 'vue'
• Use defineProps with watchers
• No approach for read-only states is available
• Use watchers to block modifications

(8/20) If you’re creating a library of reusable Vue 3 components, how do you ensure that unused components are tree-shaken from a consumer’s build?

---

• Bundle them all in one default export so they’re all always included
• Export each component as a named export, letting bundlers remove unused exports during tree-shaking
• Tree-shaking is impossible in Vue 3
• Use watchers to detect unused components

(9/20) Which advanced approach might you use to forcibly sync some local reactive state with a server on each patch cycle without watchers in Vue 3, for a minimal overhead solution?

---

• A custom render function or nextTick callback in onUpdated might trigger the sync. However, it’s typically recommended to use watchers or watchEffect with concurrency control
• Use watchers with concurrency watchers in defineExpose
• Use defineProps for concurrency watchers
• No approach to forcibly sync on each patch

(10/20) In Vue 3’s <script setup>, how do you define an interface or type for a prop that is an array of objects?

---

• Use defineProps<Array<any>>()
• Vue 3 does not support typed arrays in props
• Use defineProps<{ items: MyItem[] }>() or similar, specifying the array item interface
• defineProps() with a runtime validator only

(11/20) Which approach allows you to define typed events for defineEmits in Vue 3 + TypeScript?

---

• You cannot strongly type events in defineEmits
• Use defineProps for event definitions
• Set watchers for each event to validate types
• Use defineEmits<{'myEvent': (payload: MyType) => void}>() or a function signature approach

(12/20) What is the recommended way to detect changes to a single property within a deep object, if you want to avoid deep watchers in Vue 3?

---

• Deep watchers are always necessary
• Directly mutate the property with object.property = newValue
• Use toRef() to create a ref pointing to that nested property, then watch the ref
• Use watchEffect with flush: 'sync'

(13/20) If you want to define a global function that all Vue 3 components can call in the Options API as this.$myFunc, how do you do it?

---

• Only defineExpose in main.ts
• Add it to globalProperties: app.config.globalProperties.$myFunc = () => ...
• Vue 3 no longer supports prototype extensions
• Use watchers for the function name

(14/20) If you want to create a plugin that can be used in a Vue 3 app via app.use(), what must the plugin export?

---

• A single function named createPlugin
• A global store reference
• No special structure is required; any object is used automatically
• An object with an 'install' method that receives the app instance

(15/20) How do you create a plugin that modifies the reactivity behavior in Vue 3, such as intercepting proxy creation for certain data structures?

---

• Vue 3 doesn’t expose a direct plugin hook to alter the reactivity engine. You could monkey-patch @vue/reactivity or create custom wrappers, but there’s no official plugin system for changing the internal proxies
• Use watchers in concurrency watchers mode only
• Use defineProps for concurrency watchers
• A standard plugin can call app.config.globalProperties to override reactivity

(16/20) In a Vue 3 <script setup> block, how do you conditionally import a component only if a certain environment variable is set, to reduce bundle size in production?

---

• Use watchers for concurrency
• Impossible to conditionally import in <script setup>
• Use defineExpose for environment checks
• Use a dynamic import inside an if-statement or defineAsyncComponent with a condition, e.g. if (import.meta.env.MODE === 'dev') { ... }

(17/20) Which statement about watchers for concurrency is accurate if you have multiple watchers referencing the same property in Vue 3, each with an async call?

---

• Use watchers in main.js for concurrency watchers only
• Only the first watcher runs, ignoring the rest
• They are merged into a single callback with aggregated concurrency
• Both watchers run in parallel if the property changes, each can handle concurrency internally with onInvalidate if needed

(18/20) When might you choose to use shallowRef instead of a normal ref in Vue 3?

---

• You want every property in the assigned object to be deeply reactive
• You only need to track when the assigned value changes as a whole, not internal mutations
• Vue 3 does not support shallowRef
• You only use it with strings or numbers

(19/20) Which statement about unref() usage in Vue 3 is correct?

---

• If the argument is a ref, it returns ref.value; if not a ref, it returns the argument as-is
• It merges watchers in main.js
• You can only use unref on arrays
• unref() unsubscribes watchers automatically

(20/20) How do you dynamically import a component in Vue 3 for code splitting?

---

• import MyComp from './MyComp.vue'
• Use defineAsyncComponent(() => import('./MyComp.vue'))
• Use the require() function globally
• Vue 3 does not support dynamic imports

Submit