(1/20) What is the main advantage of using the Composition API to define global state in a standalone file, compared to using Vuex or Pinia?

---

• It requires no boilerplate; you just export reactive objects or refs and import them elsewhere
• It is the only method supported by Vue 3 for global state
• It is always faster than Vuex
• It automatically persists data to localStorage

(2/20) Which approach is recommended for large-scale state management in Vue 3?

---

• Using only global variables in main.js
• Relying solely on provide/inject everywhere
• Storing everything in localStorage
• Using a library like Vuex or Pinia

(3/20) Why might you use dynamic components (via <component :is="...">) instead of multiple v-if blocks in a Vue 3 template?

---

• v-if is not supported anymore
• They allow switching different components in the same area without losing internal state if you preserve keys
• It’s the only way to conditionally render anything in Vue 3
• They are always faster than v-if in every scenario

(4/20) How can you share a global function (e.g. a formatting helper) across all components in a Vue 3 app without importing it in every file?

---

• Add it to app.config.globalProperties, then use it via this.$formatter or from template: $formatter()
• Create a global directive that transforms data
• Use watchers to pass the function to each component
• You cannot share a function globally in Vue 3

(5/20) How do you define watchers for a reactive array if you want to see changes to item fields in Vue 3, not just additions or removals?

---

• Use defineProps for concurrency watchers
• Set watch(() => arrayRef.value, callback, { deep: true }) or watch(() => arrayRef.value[i].someField, ...) if you want a specific index’s field
• Use watchers in main.js for concurrency watchers only
• Impossible to track item field changes in arrays

(6/20) Which approach might you use to combine reactive state and computed properties in a single file that is importable in multiple Vue 3 components?

---

• Export a composable function that uses ref/ reactive/ computed, returning them so other components can share it
• Create watchers for each property in main.js
• Use defineEmits for each property
• No approach is available for shared state outside components

(7/20) In Vue 3, how do you dynamically switch between multiple components in the same spot, preserving their internal states?

---

• Use <keep-alive> around <component :is="current" key="current"/> to preserve states for previously rendered components
• Use <component :is="current"/> without keep-alive
• Switch them in watchers with localStorage
• Use globalProperties to store each component instance

(8/20) Which statement about using onActivated and onDeactivated hooks in Vue 3 is correct?

---

• They replace onMounted and onUnmounted entirely
• They only work if the component is wrapped in <keep-alive>, triggered when entering or leaving the kept-alive state
• They are only for server-side rendering to handle partial hydration
• They run when a component is created or destroyed, regardless of <keep-alive>

(9/20) How can you reference a DOM element from inside the setup() function if you’re not using <script setup>?

---

• In the Options API only: data() must define a ref for the DOM
• Use the createDOMRef() function
• Define const el = ref(null), then in the template use <div ref="el" />. Access el.value in onMounted
• You cannot access DOM elements in setup() unless <script setup> is used

(10/20) Which statement about combining 'mixins' and 'composables' in Vue 3 is correct?

---

• You can technically use both, but composables are generally the recommended approach for code reuse in Vue 3
• They cannot co-exist within the same component
• Mixins are recommended for new projects, while composables are legacy
• Using composables prevents watchers from working

(11/20) Which statement about watchers in Vue 3 is correct when using watchEffect?

---

• watchEffect automatically collects dependencies used within the callback and re-runs whenever they change
• You must explicitly declare your dependencies
• watchEffect does not run unless flush: 'sync' is used
• It is identical to watch() with an array of sources

(12/20) If a component needs both a 'getter' and 'setter' in a computed property in the Composition API, how do you define it?

---

• Use defineProps() with a setter attribute
• computed({ get: () => {}, set: (val) => {} })
• Use watchEffect() with a deep watcher
• A computed property in Vue 3 cannot have a setter

(13/20) What is the best approach to define reactive state outside of components in Vue 3?

---

• Use watchers in multiple components
• Use the Vuex store only
• Use reactive or ref to create a reactive store-like object
• Use a global variable

(14/20) How can you force Vue 3 to treat a new property addition on a reactive object as a reactivity update (like Vue.set in Vue 2)?

---

• Vue 3 no longer supports adding new properties to reactive objects
• You must replace the entire object with a new reference, because Vue 3’s Proxy auto-tracks new keys if the object is reactive from the start
• Use defineEmits for each property
• Use watchers to forcibly track new properties

(15/20) Which statement about the Composition API's onErrorCaptured hook in Vue 3 is correct?

---

• It can be used to catch errors from this component only, ignoring children
• It forcibly restarts the entire app on error
• It can capture errors from child components, optionally stopping the error from propagating
• It only handles SSR errors

(16/20) Which approach might you take if you want to manually test a large form’s watchers in a Vue 3 component using @vue/test-utils or Vitest?

---

• Impossible to test watchers in Vue 3
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Mount the component, set data fields, and see if watchers do the expected side effects (like mocking an API call or verifying local changes)

(17/20) What is the role of Transition and TransitionGroup components in Vue 3?

---

• They are replaced by CSS files only
• They handle animation and transitions for elements and lists in the DOM
• They automatically detect hardware acceleration for animations
• They are used only for server-side rendering

(18/20) Which statement about the usage of $attrs in Vue 3 with the Composition API is accurate?

---

• All unknown attributes are dropped if you do not define them as props
• $attrs is no longer available in Vue 3
• You get $attrs automatically in the setup context
• You must import useAttrs() from 'vue' to access non-prop attributes

(19/20) In Vue 3, how do you apply an animation when an item is re-ordered (e.g., when using v-for with array sorting) rather than just appearing/disappearing?

---

• Use watchers and manually apply styles
• Use a custom directive v-reorder
• Wrap the list in <transition-group> with a key on each element so reorder transitions can occur
• Re-ordering is not supported by transitions

(20/20) If you see a compile-time error 'Cannot read property of undefined' in <script setup> when referencing a top-level variable, which scenario might cause this?

---

• Using watchers in the wrong lifecycle hook
• Accessing a ref variable without .value in the template
• Misnaming a variable that does not exist in the <script setup>
• Forgetting to import the Composition API functions

Submit