(1/12) Which statement accurately describes how watchers in a composable are disposed of when the component using that composable unmounts?

---

• They automatically stop because they are tied to the current component instance’s lifecycle
• Composable watchers can never track unmount events
• They remain active indefinitely unless manually stopped
• They are converted into watchers in main.js after unmount

(2/12) When using a dynamic <component :is="compName" /> in Vue 3, how can you keep each component's internal state when toggling between them?

---

• No approach is possible for preserving state
• Use watchers in defineProps
• Wrap <component> in <keep-alive> and ensure each component has a unique key
• Use watchers to store local states in localStorage

(3/12) If you see a compile error about 'Unexpected multiple root nodes' in a .vue file, but you’re certain you’re using Vue 3, what could be the issue?

---

• Vue 3 no longer supports any root nodes at all
• You must rename the template block to <fragment> in Vue 3
• You may be using a Vue 2 template compiler or have an older build config that doesn't allow multiple roots
• Multiple root nodes are never allowed, even in Vue 3

(4/12) In Vue 3, how do you create a custom local state that is outside of any component, yet still reactive?

---

• Use const store = reactive({ ... }) in a standalone JS/TS file and import it where needed
• Declare a new Vue instance in main.js
• Use watchers on each variable in every component
• Vue 3 does not allow local reactive state outside components

(5/12) Which statement about watchers with multiple sources in Vue 3 is accurate?

---

• No approach for multi-source watchers in Vue 3
• You must pass them as an array to watch([sourceA, sourceB], callback), which provides arrays for new and old values
• You can only watch one source at a time
• Vue 3 does not allow multiple watchers on the same line

(6/12) How do you define watchers in a Vue 3 component that uses Teleport for a child modal, ensuring the watchers still run if the teleported DOM is in a different place?

---

• Use defineExpose for concurrency watchers
• Watchers do not run for teleported content
• Teleport does not break reactivity, so define watchers as usual in the child or parent. The logic is unaffected by Teleport’s DOM relocation
• Use watchers in main.js for concurrency watchers

(7/12) How do you run a cleanup function when a watchEffect’s callback is re-run or invalidated in Vue 3?

---

• Use watchers in main.js only
• onInvalidate(( ) => { ... }) inside the watchEffect callback
• Use defineExpose in the watchEffect
• No approach for cleaning up watchEffect

(8/12) What is the best way to define an async component in a non-route scenario for code splitting in Vue 3?

---

• Use watchers to load the component from localStorage
• All components are loaded synchronously by default
• Use defineAsyncComponent(() => import('...')) and reference it in the template
• Use v-html to dynamically render the component code

(9/12) How do watchers in a single file component handle concurrency if the parent toggles this component with v-if in Vue 3, creating it multiple times quickly?

---

• They remain active from the first creation
• Use watchers in main.js for concurrency watchers only
• Each creation has its own watchers. Unmounting stops them. If toggled repeatedly, watchers are created/stopped each time. concurrency is local to each lifecycle instance
• Impossible to watch toggled components

(10/12) How do you access a child component’s method from the parent if the child uses <script setup>?

---

• Impossible to call child methods in Vue 3 with <script setup>
• The parent can automatically call all child functions by name
• Use watchers in the parent to call the child’s code
• Child must define the method in defineExpose() so the parent can call it via a template ref

(11/12) If you have a parent component providing multiple values in the Composition API, how do child components selectively inject them?

---

• A child can only inject one property from the parent
• Use inject('keyName') for each provided key you need
• Props must be used instead; provide/inject can’t handle multiple keys
• inject takes no arguments, so you must inject all at once

(12/12) Which approach is recommended if you want typed watchers for concurrency referencing a route param in a Vue 3 <script setup lang="ts"> component?

---

• Import watch from 'vue', define watch(() => route.params.userId, (newVal, oldVal, onInvalidate) => { ... concurrency ... }) with TS types if needed. The route param is string by default, so parse or define your own typed logic
• Use watchers in main.js for concurrency watchers only
• Use defineExpose for concurrency watchers
• Impossible to watch route param in script setup TS

Submit