(1/20) How do you define a typed prop that can be either string or null, in a Vue 3 SFC with <script setup lang="ts"> using defineProps?

---

• Props cannot accept multiple types in TS
• const props = defineProps<{ title?: string }>() covers both string and undefined, but not explicitly null
• Use watchers for type acceptance
• const props = defineProps<{ title: string | null }>()

(2/20) Which statement about multiple templates within a single SFC in Vue 3 is correct?

---

• You can define only one <template> block per .vue file
• It’s typical to define multiple root-level <template> blocks side by side
• Multiple <template> tags are allowed if you specify different conditions or v-if blocks on them
• You must create multiple <template> blocks and export them as separate components

(3/20) What is the best practice for handling third-party libraries that manipulate the DOM in a Vue 3 environment?

---

• Use onMounted or onBeforeUnmount hooks to initialize and clean up the library, ensuring it doesn’t conflict with Vue’s virtual DOM
• Wrap them in watchers for each property they change
• Vue 3 can’t use any DOM-manipulating libraries
• Use defineExpose for the library instance

(4/20) Which statement about unmounted hooks in Vue 3 is correct?

---

• onBeforeUnmount is called immediately after the component’s DOM is removed
• onUnmounted is invoked after all child components have unmounted
• onBeforeUnmount is called before removing DOM, onUnmounted is called right after
• onUnmounted is called before the DOM is removed

(5/20) Which approach might you take if you want typed watchers in a Vue 3 SFC using <script setup lang="ts"> for concurrency referencing multiple sources, some of which might be optional?

---

• Define watch<ArrayType | undefined> for each if the sources can be undefined, or watch(() => [sourceA.value, sourceB?.value], callback). TS can handle union types. onInvalidate handles concurrency
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Impossible to watch optional sources in TS

(6/20) How do you manually stop a watcher created by watch() in Vue 3?

---

• It is impossible to stop watchers in Vue 3
• Use the 'deep: false' option
• Call watch.stop() globally
• Assign the watch to a variable, e.g. const stop = watch(...); then call stop()

(7/20) Which approach is recommended for large, complex forms in Vue 3 if you want to handle multiple steps or nested sections?

---

• Write a single massive SFC with hundreds of lines in the template
• Modularize the form into child components, or use libraries like vee-validate or vuelidate for multi-step handling
• Use watchers to store partial form data in localStorage
• Use a global directive v-form-scope

(8/20) What advantage does script setup provide when working with defineProps or defineEmits in Vue 3?

---

• It prevents watchers from being used
• You can define props and emits at the top without exporting or returning them, making code more concise and type-friendly
• It automatically returns all composables to the template without naming them
• No advantage; it’s purely aesthetic

(9/20) Which statement about 'template refs' in Vue 3 using script setup is correct?

---

• They cannot be used in script setup
• They are automatically assigned if you declare a matching variable name at the top of <script setup> using ref()
• You must declare them with defineRef()
• They only work with onMounted hooks

(10/20) Which approach is recommended if you want to store user data in a global state but don’t want to install Pinia or Vuex in Vue 3?

---

• Use watchers in main.js for concurrency watchers only
• Use defineExpose for concurrency watchers
• Impossible to do global state without Pinia
• Create a simple composable or a JS module exporting a reactive object or ref, import it in multiple components, effectively creating a mini-store

(11/20) Which statement about v-if and v-for usage in Vue 3 is recommended to avoid performance issues or unexpected behavior?

---

• Always use v-for before v-if if they are on the same element to avoid re-render inefficiencies
• Place v-if on the <template> level and v-for on the inner element only
• You must never combine v-if and v-for on the same element
• No official recommendation exists

(12/20) How do you track route parameters (e.g., /user/:id) within the Composition API so you can watch for changes in Vue 3?

---

• Use watchers in main.js for each param
• Use defineEmits for route changes
• Import { useRoute } from 'vue-router', then watch(() => route.params.id, (newVal, oldVal) => ...)
• Parameters are not reactive in Vue 3

(13/20) When using the Composition API, which function do you use to create a router instance that can be used by your entire Vue 3 application?

---

• new Router()
• useRouter()
• createAppRouter from 'vue'
• createRouter from 'vue-router'

(14/20) If you need to do something only once when a <keep-alive>-cached component is used again, which Composition API hook can you use?

---

• onBeforeUnmount
• onMounted
• onDeactivated
• onActivated

(15/20) If you have a child component that needs to define a local directive (only for that component) using the Options API, how do you do it?

---

• Local directives are not supported in Vue 3
• directives: { myDirective: { mounted(el, binding) { ... } } } in the export default
• Use watchers in the child’s data() function
• Define watchers in the root component only

(16/20) Which function can be used to map Vuex state to computed properties in a component (assuming Vuex 4 with Vue 3)?

---

• mapState
• useMap
• createMapper
• vuexMap

(17/20) When might you prefer flush: 'post' watchers in Vue 3 if you handle concurrency for measuring new DOM elements after data changes?

---

• Never, because watchers only run before DOM updates
• Use watchers in main.js for concurrency watchers only
• Use defineExpose for concurrency watchers
• You want to run watchers after the entire component (and children) DOM patch, perfect for DOM measurements or scroll adjustments

(18/20) In Vue 3, when you have multiple watchers that depend on the same reactive property, which statement is true?

---

• Watchers always run after onMounted hooks are completed
• They all run in parallel without guaranteed order
• Only the first watcher defined will run
• They run in sequence, in the order they are defined in the code

(19/20) If you need to run some code only after the entire component tree has finished updating in Vue 3, which approach might you use?

---

• This is not possible in Vue 3
• Use a global variable setTimeout() with 0ms delay
• Use onMounted() multiple times
• Use nextTick() from 'vue'

(20/20) When migrating from Vue 2 to Vue 3, which step is recommended first?

---

• Manually change all watchers to watchEffect
• Replace all templates with render functions
• Rewrite the entire app in Angular
• Update dependencies and use the Vue 3 migration build or official CLI migration helpers

Submit