(1/40) In Vue 3, how do you register a global custom directive so it’s available to all components?

---

• app.directive('directiveName', { ... }) after calling createApp(...)
• Global custom directives no longer exist in Vue 3
• In every component’s directives option individually
• Use watchers in main.js for the directive definition

(2/40) If you see a warning in Vue 3 about 'Avoid mutating a prop directly', what is the recommended fix?

---

• Props cannot be objects or arrays in Vue 3
• Use watchers to forcibly track the mutations
• Ignore it; Vue 3 allows direct prop mutation
• Create a local copy in data() or a ref in setup() and modify that instead, then emit an event if necessary

(3/40) What is the usual difference in memory usage and performance when using multiple small components vs. one large monolithic component in Vue 3?

---

• Small components automatically become global components
• Multiple small components often improve maintainability and performance by reducing re-render scope
• Both approaches have identical performance in Vue 3
• One large component is always more efficient

(4/40) When you define a custom directive globally with app.directive in Vue 3, which hook is used to handle DOM changes after the element’s parent component updates?

---

• serverPrefetch
• mounted
• unmounted
• updated

(5/40) When using Suspense in Vue 3, what does the fallback slot represent?

---

• A slot that is only rendered if watchers fail to run
• The content displayed while async setup or async components are still resolving
• No such concept in Vue 3
• A slot that merges watchers and computed properties

(6/40) What is one suggested best practice for watchers in Vue 3 to avoid excessive or redundant calls?

---

• Watch the smallest necessary piece of reactive data or use watchEffect with condition checks inside
• Disable watchers in production mode
• Watch the entire store in one big watcher
• Use deep watchers on every reactive object by default

(7/40) When migrating from Vue 2, which feature in Vue 3 replaced the need for the .sync modifier on props for two-way binding?

---

• bindProps() for direct two-way data flow
• v-for with a key
• There is no longer a two-way binding mechanism in Vue 3
• modelValue prop and update:modelValue event in custom v-model

(8/40) Which approach might you take if you want to watch a property that’s in a nested store object, but only top-level changes, ignoring deeper changes, in Vue 3?

---

• Use watchers in main.js for concurrency watchers
• Watch the reference to the nested store object or use shallowReactive in the store if you only want reference-level reactivity
• No approach to watch only top-level changes in Vue 3
• Use defineProps for concurrency watchers

(9/40) Which statement about 'slots as functions' (a.k.a. scoped slots) in Vue 3 is correct?

---

• They are only for event handling
• Vue 3 removed support for scoped slots
• They allow the child component to pass data or methods back to the parent slot scope
• They must be used in <script setup> exclusively

(10/40) Which of the following statements about the 'provide' option in the Options API is correct for Vue 3?

---

• provide can only pass strings to child components
• provide must always be an object with a key-value structure
• provide can be a function that returns an object, giving access to component instance properties
• provide only works with watch()

(11/40) What is the difference between defineAsyncComponent and dynamic imports in the Vue Router for lazy loading?

---

• defineAsyncComponent is for local usage in templates, while the router approach uses dynamic imports for route components
• They are identical in usage
• defineAsyncComponent is not allowed in Vue 3
• Router-based lazy loading works only with watchers

(12/40) Which approach might you use to implement a 'debounce' or 'throttle' behavior on a watcher in Vue 3 to limit how frequently it triggers?

---

• Wrap the callback in a debouncing utility (e.g. lodash.debounce) or define the watch effect as an async function that enforces delays
• Use flush: 'sync'
• Use defineExpose to filter events
• Set immediate: false

(13/40) Which statement about provide/inject in Vue 3 is correct?

---

• They can only be used in single-file components
• They replace props and emits entirely
• They work only with the Options API
• They allow you to share state between ancestor and descendant components

(14/40) If you have a large-scale application with many shared states across modules, what is the official recommendation from the Vue team in Vue 3?

---

• Use watchers or localStorage only
• Adopt Pinia for centralized store management or keep using Vuex if comfortable
• Global variables in main.js are mandatory
• No official recommendation; any approach is fine

(15/40) If you want to import a large third-party library only when a specific component is displayed, which Vue 3 feature helps with that?

---

• Use dynamic import syntax (e.g. import('...')) in defineAsyncComponent or route-based lazy loading
• No approach to code-split in Vue 3 is available
• Use defineExpose to dynamically import libraries
• Use watchEffect to load the library

(16/40) Which statement describes how to integrate an external library that modifies the DOM (e.g. a jQuery plugin) in Vue 3?

---

• Vue 3 disallows external libraries that manipulate the DOM
• Initialize it in onMounted so it references the correct DOM elements, then clean up in onBeforeUnmount or onUnmounted
• Use watchers for each jQuery function
• All external libraries must be defineExposed in main.js

(17/40) How can you prevent users from navigating to a new route if certain conditions are not met in Vue Router?

---

• Manually remove the route from the router list
• Use a global after hook
• Vue Router has no built-in mechanism for guarding routes
• Use navigation guards like beforeEnter or beforeEach

(18/40) Which feature in Vue 3 eliminates the need to name components in <script setup> for usage inside the template?

---

• DefineExpose handles all imports
• Components are no longer supported in <script setup>
• Automatic import and usage detection (the SFC compiler handles references to imported components in the template)
• Global component registration by default

(19/40) What is the difference between watchEffect and watchPostEffect in Vue 3?

---

• watchEffect only tracks arrays, watchPostEffect tracks objects
• No difference, they are aliases
• watchPostEffect is for SSR only
• watchEffect flushes before DOM update, watchPostEffect flushes after the DOM update

(20/40) Which statement about watchers in Vue 3 is true?

---

• A watcher always runs synchronously before DOM updates
• Watchers can only watch computed properties
• Watchers are not supported in Composition API
• You can watch multiple sources by passing an array of refs or reactive properties

(21/40) Which statement about the flush timing in watchers is TRUE for Vue 3?

---

• By default, watchers run after the component updates the DOM (post-flush)
• Vue 3 watchers ignore flush settings entirely
• By default, watchers run before the DOM update (pre-flush), but you can configure flush: 'post'
• All watchers only run once on mount

(22/40) If you want to watch a reactive array in Vue 3 and always get the new and old array values in the callback, which code snippet is correct?

---

• Arrays can’t be watched with old value references
• watchEffect(() => console.log(myArr))
• watch(() => myArr, (value, prev) => { ... }, { immediate: false })
• watch(myArr, (value, prev) => { ... }, { immediate: false }) // direct is invalid, must be function or ref

(23/40) In Vue 3, what is one difference between <script setup> and the classic <script> block with export default?

---

• <script setup> is only for TypeScript usage
• <script setup> hoists everything to top-level, removing the need for a return statement from setup()
• You cannot use props in <script setup>
• <script> blocks always must contain a name property

(24/40) Why might you define a route with a path like '/:pathMatch(.*)*' in a Vue Router 4 config for Vue 3?

---

• To define a catch-all or 404-like route matching any path not caught by earlier routes
• It merges watchers for nested routes
• No approach exists for catch-all in Vue 3 router
• To handle watchers for array changes

(25/40) How can you define a typed composable that returns reactive references in Vue 3 with TypeScript?

---

• Use script setup with defineEmits only
• You cannot combine TS with Composition API
• Create a function that returns refs typed with ref<T>() or reactive<T>()
• Write watchers for each property in data()

(26/40) How do you create a global mixin in a Vue 3 project?

---

• Import mixin from 'vue-mixins' built-in library
• app.mixin({...}) on the app instance before mounting
• Mixins must be defined in each .vue file individually
• Global mixins are not supported in Vue 3

(27/40) In Vue 3, how can you declare multiple root elements in a single component?

---

• Use <multi-root> as a wrapper
• You must use multiple <template> blocks
• Vue 3 supports fragments, so you can have adjacent root-level elements in the template
• Only one root element is allowed, as in Vue 2

(28/40) How can you preserve state when toggling multiple components with the same <component :is="var" /> in Vue 3?

---

• Wrap <component> in <keep-alive> and give each component a unique key
• Use watchers to store localStorage state
• No approach exists; toggling always resets state
• Use defineEmits for each toggled component

(29/40) If you need to define dynamic keys for an object in the template, which Vue 3 directive syntax is typically used?

---

• v-model:object
• v-once
• v-dynamic
• v-bind:[someProp]

(30/40) Which statement about watchers with the immediate option in Vue 3 is TRUE?

---

• You must use immediate with flush: 'pre'
• It forces watchers to run only once at unmount
• immediate triggers the watcher callback right after the component is mounted, even if no change has occurred yet
• immediate is ignored in Vue 3 watchers

(31/40) What is one benefit of using the 'compiler-sfc' package in Vue 3?

---

• It is required for watchers to function
• It automatically merges all SFCs into one file
• It allows you to compile Single File Components on the fly, such as in a browser-based editor or REPL
• It is for SSR only and cannot compile standard SFCs

(32/40) Which statement about watching a ref array in Vue 3 is correct?

---

• Vue 3 cannot track array changes at all
• You must replace the entire array reference to trigger watchers
• Mutations like push/splice on a ref array do trigger watchers because of proxy-based reactivity
• You must set deep: true to watch an array

(33/40) How do watchers in Vue 3 handle concurrency if you define watch(() => route.query.search, (newVal, oldVal, onInvalidate) => { ... }) for a search param?

---

• Any new route change calls onInvalidate for the previous callback’s async logic, letting you cancel or skip it if a new query arrives
• Impossible to handle concurrency in route watchers
• Use defineExpose for concurrency watchers
• Use watchers in main.js for concurrency watchers only

(34/40) Which statement describes what happens if you define both a method and a computed property with the same name in the Options API of Vue 3?

---

• The computed property overrides the method
• They merge into a single function
• The method overrides the computed property
• Vue 3 disallows using the same name for method and computed

(35/40) Which Vue 3 function can wrap a method or property so that it remains entirely out of reactivity tracking, often used for large data or external libraries?

---

• markRaw()
• readonly()
• shallowRef()
• unref()

(36/40) In a Vue 3 project with TS, how do you strongly type a ref that starts with a null value but will later store an HTML element (e.g., for a template ref)?

---

• You must omit the generic argument if it’s null initially
• const myEl = ref<HTMLElement | null>(null)
• Use ref<HTMLElement>(document.body) from the start
• Vue 3 does not support typed DOM refs

(37/40) If you need to detect when the route changes in a component using the Composition API (e.g., to run certain code on route param changes), what approach can you take?

---

• Use a watch on useRoute().params or useRouter().currentRoute
• Routes never trigger watchers
• onRouteUpdate() hook
• onBeforeUnmount in the parent route component only

(38/40) How does Vue 3 handle events in a <TransitionGroup> when items are inserted or removed?

---

• TransitionGroup does not allow for events
• It handles transitions with unique keys per item and triggers enter/leave transitions for each element
• It removes all events from child components
• Child elements cannot have dynamic events in TransitionGroup

(39/40) How can you create a dynamic asynchronous child route in Vue Router 4 for Vue 3?

---

• You must compile dynamic routes in watchers
• Define child: { path: 'child', component: defineAsyncComponent(() => import('...Child.vue')) }
• Use v-bind for route logic in the parent template
• Vue Router 4 does not support child routes

(40/40) How can you define typed emits in a Vue 3 Single File Component with <script setup lang="ts"> if you want the event to have a payload?

---

• No typed emits are possible in script setup
• const emit = defineEmits<{ (e: 'eventName', payload: MyType): void }>()
• Use watchers for each payload property
• Use defineProps for all emits

Submit