(1/20) How do you manually stop a watcher created by the watch() function in Vue 3 once you no longer need it?

---

• Use watchers array in the main.js to remove it
• Impossible to stop watchers in Vue 3 once created
• Assign the result to a variable and call that variable like a function, e.g., const stop = watch(...); stop();
• Call app.stopWatcher() globally

(2/20) When converting a Vue 2 mixin to Vue 3, what is the recommended alternative for code reuse?

---

• Use a composable function (a reusable composition function) instead of a mixin
• Use watchers for all shared logic
• Vue 3 has no alternative for code reuse
• Define a global directive with the same logic

(3/20) Which approach might you use if your watchers in Vue 3 cause an infinite loop because the watch callback sets the same reactive property it depends on, repeatedly?

---

• Use defineExpose for concurrency watchers
• Impossible to break the loop in watchers
• Use watchers in main.js for concurrency watchers only
• Add a check in the callback to see if newVal === oldVal or some condition. If no real change, skip reassigning. Otherwise, you keep re-triggering the watch. Also consider storing final results in a separate ref if possible

(4/20) How can you watch the route path in a Vue 3 component (using Vue Router 4) to perform logic when the path changes?

---

• Vue 3 does not allow watching the route path
• Use a global directive on <router-view>
• Use onBeforeUnmount for route changes
• Use watch(() => useRoute().path, (newVal, oldVal) => { ... }) in setup()

(5/20) Which approach do you use if you want to watch a nested property user.profile.address but only re-run if user.profile.address reference changes, ignoring user.profile.address.street changes in Vue 3?

---

• Impossible to watch reference changes only in Vue 3
• Use defineProps for concurrency watchers
• Pass a getter referencing user.profile.address with no deep watch. That triggers only if the address object reference changes. If you mutate inside address, it won’t trigger unless you do a deep watch
• Use watchers in main.js for concurrency watchers only

(6/20) Why might you pass an array of sources to watch() in Vue 3, rather than a single ref or getter?

---

• watch cannot accept single sources in Vue 3
• To track changes in multiple refs simultaneously and handle them in one callback
• Because watchEffect doesn’t exist
• Arrays automatically force the callback to run on every render

(7/20) How would you watch a nested property user.info.email in a large user object if you don’t want a deep watcher on everything?

---

• Watch user directly, ignoring the property
• Use watchers for the entire user object with deep: true
• Impossible to watch nested properties in Vue 3
• Use watch(() => user.info.email, (newVal, oldVal) => { ... })

(8/20) How would you watch a computed property in Vue 3 to perform side effects whenever that computed property changes value?

---

• Computed properties are not watchable in Vue 3
• Use a watchers array in defineProps
• Use onUpdated in the child component
• watch(() => computedProperty, (newVal, oldVal) => { ... })

(9/20) Which approach do you use to define watchers for a dynamic route param if you are using defineProps in Vue 3 <script setup> for the param data?

---

• Use watchers in defineExpose
• You cannot watch defineProps data
• Convert defineProps data to refs or watch a computed getter referencing them, e.g. watch(() => props.id, ...)
• No approach for dynamic route watchers with defineProps

(10/20) If you want to run some code after the entire component tree is mounted, not just the individual component, which approach might you use in Vue 3?

---

• Use nextTick() calls within the root component’s onMounted, ensuring all child DOM is resolved
• Use watchEffect on each child’s DOM element
• It is impossible to wait for the entire tree to mount
• Use onMounted in every child component

(11/20) What happens if you assign a new object to a ref instead of mutating the original object in Vue 3?

---

• The ref’s .value points to the new object, triggering reactivity updates to consumers
• It becomes read-only automatically
• Vue 3 crashes due to an error
• The ref loses reactivity

(12/20) Which Vue Router method is used to programmatically navigate to a new route?

---

• this.$move
• this.routeTo()
• router.navigate()
• router.push()

(13/20) Which statement about <teleport> in Vue 3 is correct regarding how it relates to the component hierarchy?

---

• You cannot access parent props if the component is teleported
• It breaks the parent-child relationship if the DOM is teleported
• Teleport moves the DOM node physically, but the logical parent-child relationship remains intact
• Teleport also automatically defines watchers globally

(14/20) Which feature in Vue 3 can help reduce the size of your final bundle by removing unused code from Vue’s internal modules?

---

• No such feature is available
• Custom watchers that skip code
• DefineExpose in all child components
• Tree-shaking friendly core design plus ES modules

(15/20) How can you perform a manual re-render of a component if the standard reactive system doesn’t detect your changes in Vue 3?

---

• Vue 3 removed the ability to manually re-render
• Use defineExpose for each property you want to re-render
• Change the component’s key to force a re-render, e.g. :key="someKey++"
• Use watchers with immediate: true

(16/20) Which new Suspense feature in Vue 3 allows you to display a fallback while waiting for async components or data to load?

---

• v-model async
• Use watchers for concurrency
• Suspense boundary with <Suspense> wrapping the async component, plus a <template #fallback> slot
• It’s only available in server-side rendering

(17/20) When using provide/inject in the Composition API, how do you define the provided value in a parent component?

---

• provide('key', value) inside setup() or a composable, returning no mandatory structure
• You must define an emits array for the parent
• onMounted(() => provide('key', value)) only
• Inject must be declared in the same file

(18/20) Which approach might you use for analyzing performance issues in a Vue 3 app, especially for re-render cycles?

---

• Global watchers for performance logs
• No official performance debugging is available
• Using the official Vue DevTools performance tab or console logs for reactivity triggers
• Use watchers with immediate: false to track performance

(19/20) Which advanced optimization technique was introduced in the Vue 3 compiler to reduce runtime overhead?

---

• No new optimizations were introduced
• Static hoisting (hoisting static nodes out of the render function)
• Compiled watchers
• Manual patching only

(20/20) If you need to perform an action right after DOM insertion, which Composition API hook should you use?

---

• onBeforeMount
• onBeforeUpdate
• onMounted
• onUpdated

Submit