(1/40) Which statement about reactivity transform (the $ref and $computed proposal) is correct in Vue 3 as of its experimental stage?

---

• No approach for reactivity transform in Vue 3
• It’s identical to defineProps in <script setup>
• It’s an experimental opt-in transform that rewrites $ref variables to .value usage, requiring specific build tooling or Babel plugins
• It’s fully stable and included by default in all builds

(2/40) In Vue 3, how can you explicitly type your reactive state in TypeScript for a store-like object using the Composition API?

---

• You must define a custom directive for type checking
• Vue 3 does not support TypeScript for reactive states
• Use defineProps() to define a store
• Use reactive<MyInterface>({ ... }) or useRef<MyType>(initialValue)

(3/40) Which statement about watchers referencing route.params vs. route.query is correct if you do watch(() => [route.params, route.query], callback) in Vue 3?

---

• If either changes, the callback triggers with array of new/old [params, query]. On concurrency, define onInvalidate if you do an async call per route change
• Use watchers in main.js for concurrency watchers only
• They never trigger watchers in Vue 3
• No approach to watch both params and query at once

(4/40) In Vue 3 with script setup, how do you define props in a TypeScript-friendly manner without manually writing an export default object?

---

• Using defineProps() macro at the top of script setup
• Props cannot be used with script setup
• Defining them via globalProperties
• Using export const props = {}

(5/40) How do you properly track the reactivity of a given property within a large object using the toRefs() function in Vue 3?

---

• Pass the entire object to toRef() with the property name
• Watchers are the only way to track properties
• Use toRefs(reactiveObject) which returns an object of refs for each top-level key
• You cannot convert an entire object’s properties to individual refs

(6/40) Which advanced usage of defineCustomElement might you adopt if you want to combine watchers from multiple child web components in a single effect scope for concurrency in Vue 3?

---

• Use defineProps for concurrency watchers
• Impossible to share effect scopes across multiple custom elements
• Use watchers in main.js for concurrency watchers only
• If each custom element is its own Vue instance, you can’t trivially share watchers. But you could define an external reactivity module or effect scope that each custom element imports, allowing shared concurrency logic. Very advanced approach

(7/40) Which statement about the config.errorHandler in Vue 3 is correct?

---

• It triggers watchers for every error automatically
• It only works for watchers in the Composition API
• Vue 3 removed config.errorHandler from core
• It’s set on the app instance, e.g. app.config.errorHandler = (err) => { ... }, to catch uncaught errors globally

(8/40) Which approach might you consider if your watchers in a Vue 3 form do expensive operations and you want to avoid blocking UI on every small change?

---

• Impossible to avoid UI block from watchers
• Debounce or throttle the watchers, or move heavy computations to a web worker. Possibly set flush: 'post' so the user interface updates quickly before the watchers run
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only

(9/40) When migrating from Vue 2, which is a direct replacement for the root instance property Vue.prototype in Vue 3?

---

• globalProperties on the app instance (app.config.globalProperties)
• onGlobalMount inside the main.js
• Use a global directive instead
• No direct equivalent is offered by Vue 3

(10/40) When building a library or reusable component in Vue 3, how can you ensure tree-shaking removes unused parts of your code?

---

• Use named exports and rely on bundlers like Webpack or Rollup that tree-shake ES modules
• Vue 3 does not support tree-shaking
• Always export a default object with all code in it
• Use watchers for any unused code

(11/40) Which approach might you take if you want to type-check the shape of route.params in Vue 3, ensuring route.params.id is a string in your components?

---

• Create a TS interface or type for your route params, then in your code do const route = useRoute() as RouteWithId. There's no built-in enforcement at runtime, but TS can help you at compile time
• Use watchers for concurrency watchers in defineExpose
• Impossible to type-check route params in TS
• Use defineProps for concurrency watchers

(12/40) When might you choose shallowRef over a normal ref in Vue 3?

---

• shallowRef does not exist in Vue 3
• When you need deep reactivity in large objects
• When you only want reactivity on reference changes, ignoring nested object mutations for performance reasons
• Use watchers to manage references

(13/40) How do watchers in Vue 3 handle concurrency if a user toggles a child component on and off with v-if multiple times rapidly, and the child defines watchers for an async operation?

---

• No approach to concurrency watchers for toggled components
• Use watchers in main.js for concurrency watchers only
• Use defineExpose for concurrency watchers
• Each time the component is created, watchers are defined. Unmounting stops them. If re-mounted, watchers are created again. The concurrency is handled within the watchers' onInvalidate if the data changes while the child is still mounted

(14/40) Which statement about watchers created with watch() in Vue 3 Composition API is correct regarding the default flush timing?

---

• They run after the DOM update by default (post-flush)
• They run before the DOM update by default (pre-flush)
• They run synchronously in the same event cycle by default
• They do not run unless immediate: true is used

(15/40) When might you use shallowReadonly in a Vue 3 application?

---

• When you want top-level properties to be read-only while allowing nested objects to remain mutable
• When you need watchers for concurrency only
• shallowReadonly is not in Vue 3
• When you want deeply immutable data

(16/40) How do you remove a plugin or stop it from being active once it's been installed via app.use() in Vue 3?

---

• Call app.unuse() with the plugin reference
• Use watchEffect to disable it
• Delete app.config.globalProperties.pluginName
• You cannot remove a plugin once installed without re-creating the entire app instance

(17/40) What is the recommended way to handle fetching data asynchronously in a Vue 3 component before it fully renders, giving you a placeholder or loading state?

---

• Use Suspense with async setup() or defineAsyncComponent for a placeholder
• Use watch() with immediate option to fetch data
• Use onBeforeMount to fetch data synchronously
• Vue 3 cannot handle async data fetching without external libraries

(18/40) When might you use watchPostEffect in a Vue 3 component?

---

• It’s identical to watchEffect with no difference
• If you need to track changes without oldVal/newVal in a single array
• If you want the effect to occur after the DOM patch cycle, e.g., for measuring updated DOM states
• It is only used for route transitions

(19/40) Which approach might you take if you have watchers referencing an object property in a child that unmounts before the async operation completes in Vue 3?

---

• Inside the watch callback, use onInvalidate or onUnmounted to cancel or ignore the operation if the child unmounts. The watchers themselves stop automatically on unmount, but the async might need manual cancellation
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Impossible to cancel async operations in watchers

(20/40) How do you explicitly define that a child component in Vue 3 does not inherit non-prop attributes (class, style, etc.) onto its root element?

---

• Use defineEmits to discard them
• Vue 3 disallows ignoring unknown attributes
• Add watchers for each attribute
• Set inheritAttrs: false in the component (Options API) or in defineComponent config

(21/40) Which statement about watchers referencing a route param plus a local store in a single callback is correct in Vue 3 if flush: 'sync' is used?

---

• Impossible to define watchers with flush: 'sync'
• They run synchronously, potentially blocking UI if the callback is expensive, seeing immediate changes for both sources in the same event cycle
• Use watchers in main.js for concurrency watchers only
• They run after the DOM update

(22/40) Which is an advantage of onBeforeUnmount over onUnmounted if you want to handle concurrency watchers in a Vue 3 child component?

---

• Use watchers in main.js for concurrency watchers only
• You might want to stop watchers or sync state right before DOM removal. onUnmounted is after removal. If you need logic prior to actual unmount, onBeforeUnmount helps
• No difference between the two hooks
• onBeforeUnmount doesn’t exist in Vue 3

(23/40) When might you consider using an effect scope in Vue 3 to isolate watchers and computed properties?

---

• Use defineExpose in <script setup>
• No approach for effect scopes in Vue 3
• If you need to attach watchers to the global app instance only
• If you want a group of reactive effects (watchers, computed) to be manually stopped or disposed together, outside of a component’s lifecycle context

(24/40) When might you consider writing a global mixin in Vue 3 despite composables being recommended?

---

• If you want watchers for concurrency only
• If you truly want to inject behavior into all components (e.g., a universal logging mechanism), though caution is advised
• Mixins have no effect in Vue 3
• Vue 3 forbids all mixins

(25/40) When might you use watchEffect with the 'flush: sync' option in Vue 3?

---

• If you want to ignore changes entirely
• Vue 3 does not support flush: sync for watchEffect
• If you need the side effect to run synchronously in the same tick as the reactive data change
• If you want to watch multiple sources with oldVal/newVal

(26/40) How can you convert a reactive object to a plain JavaScript object in Vue 3 for serialization or debugging?

---

• Use JSON.stringify() directly on the reactive object
• Use watchers to capture each property in an array
• Use toRaw() from 'vue' to get the underlying original object without proxies
• It’s impossible to extract plain data from a reactive object

(27/40) Which statement accurately describes how watchers should be used in Vue 3?

---

• They auto-cache results for the template
• They should be the primary way to compute derived states
• They are best for side effects or when you need to run code in response to data changes, not for pure data derivation
• They are always synchronous and cannot be deferred

(28/40) When using watchEffect in Vue 3, how do you handle async code that might need cancellation if new changes occur rapidly?

---

• Inside watchEffect(() => { ... onInvalidate(() => { cancelAsync() }) }) to clean up previous async tasks
• You cannot handle concurrency in watchEffect
• Use flush: 'sync' always
• Use watchers for concurrency

(29/40) Which approach helps if your watchers in Vue 3 cause too many re-renders when reactive data changes, and you want to gather changes and update once after a certain delay?

---

• No approach for debouncing watchers in Vue 3
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Implement a debounced or throttled watch callback, storing changes and applying them after a delay. Alternatively, flush: 'post' can help but may not be enough for real debouncing

(30/40) What is the purpose of 'app.config.unwrapInjectedRef' in Vue 3?

---

• It is used to unwrap Teleports in SSR
• It disables unref() globally
• It’s an experimental config that, when enabled, allows refs to be 'unwrapped' automatically in inject() calls
• It forces watchers to unwrap refs in computed properties

(31/40) Which statement about watchers in Vue 3 is TRUE when flush is set to 'post'?

---

• The watcher callback is triggered before the DOM updates
• It prevents watchers from running in production mode
• The watcher callback is triggered after the component’s DOM has been updated
• It will only watch computed properties

(32/40) What is the correct syntax for using multiple v-model bindings on the same child component in Vue 3?

---

• Multiple v-model directives are forbidden by Vue 3
• <Child v-model="someObject" multiple />
• <Child :models="[first, last]" /> with watchers
• <Child v-model:firstName="first" v-model:lastName="last" /> with corresponding props modelValue, modelValue2 in the child

(33/40) Which approach might you consider if your watchers for concurrency need to fetch data from multiple URLs in a single callback in Vue 3, and you must cancel them individually if new changes arrive?

---

• Within the watch callback, do multiple async calls. Use an array or multiple tokens. onInvalidate(() => { cancel each pending call }). You can store each request's abort signal if using fetch or a library with cancellation
• Impossible to handle concurrency with multiple requests
• Use defineExpose for concurrency watchers
• Use watchers in main.js for concurrency watchers only

(34/40) Which statement about 'mixins' in Vue 3 is accurate?

---

• Mixins are no longer supported in Vue 3
• Mixins can be replaced with Composition API composables for more flexible logic sharing
• Mixins are required for all lifecycle hooks
• Mixins must be used in every component by default

(35/40) How do you conditionally apply transitions in Vue 3 to multiple elements within a list, such as an array of items rendered with v-for?

---

• Use multiple <transition> wrappers around each element
• Transitions do not work on list items
• Use <transition-group> for list transitions
• Use watch() to animate each element manually

(36/40) What is the purpose of the optional 'expose' parameter in defineCustomElement when creating a custom element in Vue 3?

---

• To attach watchers to the DOM
• No such parameter exists in defineCustomElement
• To define which component methods are available on the element instance in JavaScript
• To merge multiple SFCs into one custom element

(37/40) Which statement about 'scopeId' in Vue 3 is correct regarding <style scoped> in Single File Components?

---

• scopeId is automatically assigned by the compiler for SFCs with <style scoped> to isolate CSS
• scopeId is used only in the Composition API watchers
• You must manually set scopeId for each component
• Vue 3 does not support scoped styles

(38/40) How do watchers in a composable differentiate between two different components using that composable in Vue 3?

---

• Each component that imports the composable runs the composable logic, creating distinct watchers bound to that component’s instance context
• Use defineExpose for concurrency watchers
• No approach to have watchers in composables
• They share a single watch instance for all components

(39/40) In Vue 3, what is the purpose of the 'expose()' function inside <script setup>?

---

• To load dynamic imports automatically
• To publicly expose component methods or data to the parent through a template ref
• To declare global variables
• To define watchers for the parent

(40/40) When you return an object from setup(), how do you reference those returned properties within the template of a Vue 3 component (non-script setup)?

---

• myProp directly (no 'this') if you’re using standard Options API
• setupContext.myProp
• this.myProp
• You must define them in data() as well

Submit