(1/20) In Vue 3, how do you create a global component?

---

• Export it from main.js directly
• Use the data function to register a component globally
• By using app.component() after createApp
• Vue.component() method is the only way

(2/20) How might you handle a scenario where you have a large object in your Vue 3 store, but only certain top-level fields need reactivity?

---

• Use v-model on every field of the object
• Use shallowReactive on the object so nested properties are not fully tracked
• Vue 3 no longer supports partial reactivity
• Store it in sessionStorage to bypass reactivity

(3/20) Which statement accurately reflects how watchers created within a composable (Composition API function) are tied to the component’s lifecycle in Vue 3?

---

• They automatically stop when the component unmounts, because they’re linked to the active component instance context
• They do not support concurrency control
• They throw an error if used outside onUnmounted
• They persist beyond component unmount

(4/20) When might you prefer using Teleport in Vue 3 for UI elements?

---

• If you want to remove watchers from child components
• Never, since watchers handle it
• If you need to render a component's DOM in a different place, like a global modal or popup, while preserving the original logical hierarchy
• If you need to replicate watchers globally

(5/20) Which approach is suggested to manage forms across multiple steps (like a wizard) in a Vue 3 project?

---

• Use watchers in each step to store data globally
• Use a shared composable or a global store (Pinia/Vuex) to store form data across steps, or pass data up/down
• Write a single giant component with all steps in the same template
• Vue 3 doesn’t support multi-step forms

(6/20) Which plugin or approach can help you manage typed definitions of store actions, getters, and state when using Pinia in a Vue 3 + TS project?

---

• Use watchers on each action to provide types
• Rely on automatic type inference with defineStore, or define actions as typed methods within the store
• Pinia does not support TypeScript
• Use provide/inject for typed actions

(7/20) Which statement about watchers referencing multiple route params is true if you do watch([() => route.params.userId, () => route.params.postId], callback) in Vue 3?

---

• Impossible to watch multiple route params in one callback
• It merges watchers for concurrency watchers automatically
• Use defineProps for concurrency watchers only
• The callback receives ([newUserId, newPostId], [oldUserId, oldPostId]) if either param changes, in a single run if both change in the same flush cycle

(8/20) Which Composition API function in Vue 3 can convert an existing reactive object’s property into a ref pointing to that property?

---

• markRaw()
• toRefs()
• toRef()
• shallowRef()

(9/20) When using Vue Router, what does the 'history' mode do?

---

• Caches route transitions locally
• Automatically tracks the user’s browser history in the app state
• Removes the '#' from the URL and uses the HTML5 History API
• Enables sessionStorage for state management

(10/20) In a Vue 3 project, which approach is recommended for handling large-scale, app-wide translations (i18n)?

---

• Write watchers on each text output
• Use vue-i18n or a similar official plugin that supports Vue 3, with a global plugin registration
• You must compile separate builds for each language
• Store every translation in localStorage and parse them on mounted()

(11/20) How do you define a watch in Vue 3 that re-triggers if either foo.value or bar.value changes, but you want to see old and new values for both in the callback?

---

• watch(() => [foo.value, bar.value], ([newFoo, newBar], [oldFoo, oldBar]) => { ... })
• watchEffect automatically provides old values
• Use watchers individually on foo and bar then combine them
• Watchers cannot track arrays of refs

(12/20) Which statement about global mixins in Vue 3 is accurate?

---

• They must be declared in watchers
• They can be added with app.mixin(...) and affect every component, but can lead to conflicts if not used carefully
• Global mixins no longer exist in Vue 3
• They only apply to functional components

(13/20) When using defineComponent in a TypeScript Vue 3 setup, how do you specify the type of the data() return object?

---

• You can only type props, not data
• Use data: () => <YourType>{ ... } or define the data shape in the component’s generic if you prefer advanced usage
• No approach to type data in defineComponent
• Use watchers in main.ts only

(14/20) Which directive argument syntax in Vue 3 allows you to dynamically set the event name for v-on?

---

• v-on:[dynamicEvent]
• v-bind:eventName
• v-model.dynamicEvent
• v-event(dynamicEvent)

(15/20) In Vue 3, which approach is recommended if you need to store global state but do not want to use Pinia or Vuex?

---

• Store everything in window.myGlobalVar
• Use watchers in main.js for all components
• Use defineExpose in the root component
• Create a reactive object or ref in a standalone module and import it wherever needed (a simple 'store.js')

(16/20) In Vue 3, how do you define the data return of a Composition API setup() when using the Options API style (i.e., not <script setup>) so the template can access it?

---

• You must define a custom directive to forward data to the template
• Use watchers to expose data
• Return an object from setup(), which merges into the component instance, accessible via this
• All data declared in setup() is automatically invisible to the template

(17/20) What is the recommended way to structure a large Vue 3 application with many nested routes?

---

• Vue 3 does not allow nested routes
• All routes must be in a single array in main.js
• Use watchers for route changes only
• Organize routes in multiple files, potentially grouping them, and define them in the router config with nested children

(18/20) Which approach ensures that attributes like class or style on a child component flow to its root element by default if they are not declared as props?

---

• inheritAttrs: true in the Options API or default behavior for <script setup>
• Set props: { class: String } in defineProps
• Vue 3 discards all unknown attributes by default
• Explicit watchers for $attrs in data()

(19/20) Why might you choose to use the 'shallowRef' or 'shallowReactive' in Vue 3?

---

• To apply deep reactivity to all properties
• To reduce overhead by not tracking nested properties inside objects or arrays
• They are not part of Vue 3
• To track every nested property in an object

(20/20) Which statement best describes a scenario for using shallowRef in Vue 3?

---

• You only want reactivity for the ref’s top-level assignment, ignoring changes within the assigned object
• You must use shallowRef with watchers exclusively
• You want to track every property in an array deeply
• You want reactivity for deeply nested object properties

Submit