(1/20) How can you define watchers for concurrency that handle user input changes in real-time, ensuring you cancel the previous search request if they type again quickly?

---

• Use defineProps for concurrency watchers
• Define watch(() => searchInput, (val, oldVal, onCleanup) => { startRequest(...); onCleanup(() => cancelRequest()) })
• Use watchers in main.js for concurrency watchers only
• Impossible to handle concurrency watchers in Vue 3

(2/20) Which approach might you use to test code that calls onMounted or other lifecycle hooks in a Vue 3 Single File Component?

---

• Write your entire test in main.js manually
• Lifecycle hooks cannot be tested in Vue 3
• Use watchers in each test file instead of hooks
• Use a testing library like @vue/test-utils or Vitest, which can mount the component and trigger lifecycle hooks

(3/20) Which statement about the 'mixins' feature in Vue 3 is correct?

---

• Mixins automatically override provide/inject functionalities
• Mixins are supported, but the Composition API’s composables are recommended for clearer logic reuse
• Mixins must be used in every single component by default
• Mixins are not supported at all in Vue 3

(4/20) When using a dynamic import for route-based code splitting in Vue 3 Router, how do you typically define the route?

---

• component: require('...')
• component: new Promise(...)
• You must import everything upfront; dynamic route imports are not supported
• component: () => import('./views/MyRouteView.vue')

(5/20) Which statement about watchers is accurate if you combine watchEffect with watch in the same component for different needs in Vue 3?

---

• They conflict, so it’s forbidden
• They can coexist; watchEffect auto-tracks dependencies used in its callback, watch is explicit. They do different jobs, no inherent conflict
• Use watchers in main.js for concurrency watchers only
• Impossible to define both watchEffect and watch

(6/20) How do watchers in a child handle concurrency if the child is unmounted and remounted quickly in Vue 3?

---

• Use watchers in main.js for concurrency watchers only
• No approach to handle concurrency if unmounted
• They persist beyond unmount
• They are automatically stopped on unmount, so any concurrency or pending async is effectively canceled unless you store global references. On re-mount, watchers re-initialize

(7/20) How can you define a global property to be accessible as this.$myGlobal inside an Options API component in Vue 3?

---

• app.config.globalProperties.$myGlobal = someValue
• Use watchers with defineExpose
• Global properties are removed from Vue 3
• Define them in defineProps

(8/20) Which approach might you consider if you only want to watch the length of a reactive array in Vue 3, ignoring changes to item contents?

---

• Watch a getter returning arrayRef.value.length, so if you push/pop the array, length changes, triggering the watch callback. Item content changes won't matter
• Define watchers in main.js for concurrency watchers
• Use defineExpose for concurrency watchers
• Impossible to watch array length only

(9/20) Which approach is recommended for advanced form validation in a Vue 3 application?

---

• Rely on global mixins only
• Validation is not possible in Vue 3
• Use watchers for each field, storing errors manually
• Use libraries like vee-validate or vuelidate that support Vue 3

(10/20) In Vue 3, how do you watch a nested route param change (e.g., $route.params.userId) using the Composition API?

---

• Access route.params.userId in onUnmounted
• Set a global directive to observe route changes
• Use watch(() => route.params.userId, (newValue, oldValue) => {...}) after obtaining route via useRoute()
• Use watchers on this.$router exclusively

(11/20) Which statement about plugin installation in Vue 3 is correct?

---

• Plugins can only be installed in Vue 2
• You cannot pass plugin options in Vue 3
• You call createApp(App).use(MyPlugin) to install the plugin for that app instance
• Plugins must be installed before creating the app instance

(12/20) How can you watch multiple properties on a single reactive object in Vue 3, triggering one callback whenever any of them changes?

---

• Use a shallowRef for each property separately
• Pass an array of getters to watch, e.g. watch([() => user.name, () => user.age], ...)
• Use watchEffect() with flush: 'sync'
• It is not possible to watch multiple properties at once

(13/20) Which statement about watchers in the Composition API is TRUE regarding the function signature?

---

• watch(source, callback, options) can accept a ref, a getter function, or an array of refs/functions as the source
• It cannot accept an array of sources
• It requires an explicit newVal, oldVal in the arguments, even for watchEffect
• You must always pass a single reactive object to watch

(14/20) In Vue 3, what is the recommended approach for referencing a DOM element if you’re using the setup() function (not script setup)?

---

• Refs can only be used if you name them 'elRef' or 'divRef'
• Use document.getElementById directly
• Use a template ref (ref="myElem") and then define a matching const myElem = ref(null) in setup, returning it
• They are not accessible in the Composition API

(15/20) How does Vue 3 handle events or watchers for components that are Teleported elsewhere in the DOM?

---

• All watchers are disabled for teleported components
• You must rewrite watchers to reference the new DOM node
• They continue to function as normal, because Teleport only affects where the component is rendered, not its reactivity or event system
• Teleport breaks the parent-child relationship entirely

(16/20) Which statement about watchers referencing a Teleport-based modal is accurate if the modal references the same store as the parent in Vue 3?

---

• No approach to watch store in teleported children
• Teleport breaks store watchers in the child
• Use watchers in main.js for concurrency watchers only
• The Teleport location is irrelevant to reactivity; watchers referencing the store see changes normally in both parent and teleported child

(17/20) When you have a watch() in Vue 3 monitoring a reactive object, but you only care about changes to specific properties, which approach is more optimal?

---

• Use a deep watcher on the entire object
• Watch an entire array of objects using watchers for each item
• Watch separate computed getters for each property you want to track instead of the entire object
• Add a v-if in the template to ignore changes

(18/20) What is the difference between a local directive and a global directive in Vue 3?

---

• Local directives are no longer supported in Vue 3
• They have identical behavior, just different naming conventions
• Local directives are defined inside a component’s directives option or script setup; global directives are registered via app.directive()
• Global directives can only be used in child components

(19/20) Which statement about watchers in Vue 3 using an array of sources is correct?

---

• watch([sourceA, sourceB], callback) triggers the callback when either sourceA or sourceB changes
• watch() with arrays triggers only on route changes
• You can only watch one source at a time in watch()
• They must be converted to a single computed property first

(20/20) Which statement about script setup is accurate regarding dev tools or stack traces in Vue 3?

---

• You cannot get stack traces with script setup
• It is forced to name the component after the SFC filename or you can use defineOptions to specify a name
• script setup automatically merges watchers globally
• You lose component name in dev tools if you do not specify a name

Submit