(1/12) Which best describes the use of defineCustomElement in Vue 3?

---

• It merges Composition and Options APIs
• It replaces defineComponent
• It is used to create single-file components without a template
• It allows you to define Vue components as native Web Components

(2/12) Which approach might you use to create a typed store in Vue 3 using a basic composable, ensuring no component re-renders if only certain fields change?

---

• Use watchers for concurrency watchers in defineExpose
• Use defineProps for concurrency watchers
• Impossible to have typed composable stores in Vue 3
• Use shallowRef for separate fields if you only want top-level reactivity, or store them in separate ref() so only referencing components update

(3/12) Which approach might you take if you have watchers for concurrency referencing an external library instance in a child component, and want to ensure it’s not proxied in Vue 3?

---

• Impossible to skip reactivity on library instances
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Apply markRaw(libraryInstance) before passing it as a prop to the child, or store it in a shallowRef/markRaw in the child, ensuring no proxy overhead

(4/12) How do you prevent watchers from re-triggering themselves if you manipulate the same data inside their callback in Vue 3?

---

• Impossible to avoid re-triggering watchers
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers
• Typically, you rely on the next tick or condition checks to avoid infinite loops, or use local variables. The reactivity system has a queue that merges synchronous updates in one flush, but if you mutate the same property, you can cause repeated triggers unless you structure logic carefully

(5/12) Which statement about SSR with Vue 3 is TRUE?

---

• SSR is built-in with watchers only
• Vue 3 does not have official SSR support
• You must disable reactivity for SSR
• You can use the @vue/server-renderer package to render components to strings on the server

(6/12) Which approach ensures watchers in a complex concurrency scenario do not cause memory leaks if you create them in watchEffect for multiple conditions in Vue 3?

---

• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Rely on onInvalidate or onUnmounted. watchEffect cleans up automatically if the component unmounts. If you define them within the instance context, they stop automatically, but use onInvalidate to handle each re-run’s cleanup
• Impossible to stop watchers in watchEffect

(7/12) When using onServerPrefetch in a Vue 3 component, in what context does this hook get called?

---

• On the server for error handling exclusively
• It is no longer supported in Vue 3
• During client-side routing transitions only
• On the server during SSR to prefetch data before rendering the HTML

(8/12) Which lifecycle hook in Vue 3 Composition API corresponds most closely to the old 'created' hook in the Options API?

---

• onCreated
• There is no direct equivalent; setup() covers that phase
• onBeforeMount
• onMounted

(9/12) How do watchers in a composable handle concurrency if you store a setTimeout or an async request in watchEffect, but the user triggers new changes rapidly in Vue 3?

---

• Use defineExpose for concurrency watchers
• Use onInvalidate(( ) => clearTimeout or cancel the request) so the old effect is invalidated before the new runs
• Use watchers in main.js for concurrency watchers only
• No approach to concurrency in watchEffect

(10/12) Which approach might you use if you define watchers for concurrency referencing a store property in multiple components, and you want one place to handle the concurrency logic instead?

---

• Use defineProps for concurrency watchers
• No approach to define watchers in the store
• Use watchers in main.js for concurrency watchers only
• Define watchers directly inside the store (Pinia or a reactive object) if you want a single concurrency approach. Another approach is a dedicated composable that wraps the store usage with concurrency logic

(11/12) When referencing a DOM element in <script setup> for a Canvas-based drawing library in Vue 3, how do you type the ref for concurrency watchers?

---

• Impossible to type DOM refs in script setup
• const canvasEl = ref<HTMLCanvasElement | null>(null); onMounted(() => { if (canvasEl.value) { ... } }) so TS knows it’s a Canvas or null
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers

(12/12) What is the difference between using defineCustomElement and defineComponent in Vue 3?

---

• They are interchangeable synonyms
• defineCustomElement is used for SSR only, defineComponent for client apps
• defineCustomElement creates a web component, while defineComponent creates a standard Vue component
• defineComponent was removed in Vue 3

Submit