(1/40) When dealing with TypeScript in Vue 3 Single File Components, which macro helps you define the events a component can emit?

---

• defineEmits()
• onErrorCaptured()
• defineProps()
• emitOptions()

(2/40) What is the recommended way to handle i18n (internationalization) in a Vue 3 application?

---

• Hardcode all strings in the template for each language
• Use the official vue-i18n library or a similar 3rd party library that supports Vue 3
• Use watchers for each language string
• Use a custom directive to switch text based on locale

(3/40) When you define a composable function in Vue 3, how do you ensure watchers defined inside it stop when the consuming component unmounts?

---

• Because watchers are attached to the current active instance, they automatically stop on unmount
• It is impossible to stop watchers from a composable
• All watchers must be declared in main.js to allow disposal
• You must manually pass a stop function to the parent

(4/40) When might you consider using a shallowReactive object in Vue 3 instead of reactive?

---

• shallowReactive does not exist in Vue 3
• When you want deeper reactivity on all nested properties by default
• When you only want to track changes to the object's top-level properties, ignoring nested object reactivity for performance
• When you need SSR to skip hydration for that object

(5/40) How do you define watchers in an Options API component if you want to watch an object property on 'user.info', ignoring deeper nested changes in 'user.info.address' in Vue 3?

---

• watch: { 'user.info'(newVal, oldVal) { ... }, deep: false } ensures only changes to info reference triggers, ignoring deeper nested changes
• Use watchers in main.js for concurrency watchers
• No approach for partial watchers in Options API
• Use defineExpose for concurrency watchers

(6/40) Which of the following statements about using watchers for arrays in Vue 3 is correct?

---

• Pushing or splicing a reactive array triggers the watcher automatically
• You must always use shallowRef for arrays
• You must replace the array reference entirely for watchers to trigger
• Watching arrays always requires the deep option

(7/40) Which statement best explains how watchers in a composable function get cleaned up upon component unmount in Vue 3?

---

• They are converted into watchers in main.js after unmount
• They automatically stop because they are bound to the current instance context, which ends on unmount
• They persist until you manually call stop() for each watcher
• Composables cannot define watchers

(8/40) Why would you use 'vite' instead of the Vue CLI for building a Vue 3 project?

---

• vite is an official plugin for Babel
• vite is generally faster and leverages native ES modules for quicker dev builds
• Vue CLI is no longer maintained
• vite only works with older versions of Vue

(9/40) How do you define watchers in a Vue 3 SFC if you only want them to run in the client, not during SSR?

---

• Use defineProps for concurrency watchers
• Impossible to skip watchers in SSR
• Use watchers in main.js for concurrency watchers only
• Wrap the watch logic in a check if (typeof window !== 'undefined') or if (import.meta.env.SSR) { ... } to skip on SSR. Another approach is to define them in onMounted so they don’t run on the server

(10/40) Which statement is TRUE about watchers in a Teleport child if the parent teleports that child to another part of the DOM in Vue 3?

---

• Watchers remain functional because the logical parent-child relationship is not changed by Teleport
• Use watchers in main.js for concurrency watchers only
• Teleport breaks watchers for the child
• No approach for watchers in teleported components

(11/40) Which of the following is a valid reason to use watch() over watchEffect() in Vue 3?

---

• You want to automatically track every reactive reference without specifying them
• You cannot use watchEffect() inside <script setup>
• watch() only runs once by default
• You need to compare the new and old values (newVal, oldVal) of a specific source

(12/40) Which best describes how you define a typed array prop in a Vue 3 SFC with <script setup lang="ts"> using defineProps?

---

• Use defineEmits to handle typed arrays
• You must define watchers for typed arrays
• const props = defineProps<{ items: SomeType[] }>()
• Arrays cannot be typed in Vue 3

(13/40) How can you test whether a directive is working correctly in a Vue 3 component using @vue/test-utils?

---

• Directives cannot be tested with test-utils
• Use watchers for each directive property in a separate test file
• Directives must be tested in a production build only
• Mount the component and inspect the element's attributes, or perform actions to see if the directive's behavior triggers the expected DOM updates

(14/40) What is the difference between watchers created by watch() and watchers created by watchEffect() when it comes to 'lazy' behavior?

---

• watch() runs immediately on component mount; watchEffect() is lazy
• Neither can be configured to run lazily
• Both run immediately by default
• watchEffect() runs immediately once, and watch() is lazy unless immediate: true is set

(15/40) How do you define watchers if you only want them to run on route query changes, ignoring route param changes, in Vue 3?

---

• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Impossible to isolate route query watchers
• watch(() => route.query, callback) triggers on query changes, but not param changes. Or watch(() => route.query.someField) for a specific query param

(16/40) In Vue 3, how do you lazily load a component in the template if you do not want to rely on route-based dynamic imports?

---

• Use defineAsyncComponent(() => import('./MyComponent.vue')) and reference it in your template
• Vue 3 does not allow lazy loading outside routes
• Wrap the entire app in <keep-alive>
• Use watchers to load the component code from localStorage

(17/40) In a Vue 3 app, how do you create a code splitting boundary for only certain large components if you are NOT using Vue Router?

---

• Use watchers to conditionally load scripts from a CDN
• Use defineAsyncComponent and place it in the template conditionally
• You must rely on route-based lazy loading only
• Vue 3 does not allow manual code splitting

(18/40) When using the Composition API, what is the main difference between a watch() and a watchEffect() call regarding dependency detection?

---

• watch() auto-detects all dependencies, watchEffect() must explicitly declare them
• watchEffect() auto-detects dependencies used within the callback, while watch() requires a specific source or array of sources
• Both are identical except for the flush timing
• watch() only works with arrays, watchEffect only with objects

(19/40) How can you share a single reactive state across multiple components in Vue 3 without using Vuex or Pinia?

---

• It’s impossible without a dedicated state management library
• Use provide/inject or export a reactive object from a shared module
• Use an event bus
• Use watchers to pass data between components

(20/40) In a Vue 3 project, how do you create a code-splitting boundary for a large component to be lazily-loaded when the user navigates to a route?

---

• Use the dynamic import syntax inside defineAsyncComponent() or the route config: component: () => import('...')
• You must compile the component into a separate library
• Use watch() for route changes and then dynamically attach <script> tags
• Vue 3 doesn’t support lazy-loading

(21/40) How can you explicitly define that a Vue 3 Single File Component is using the Composition API (Options API is not used)?

---

• Export a function from the .vue file instead of an object
• Use <script setup> or a plain <script> with setup() exported, not an options object
• Use watchers in main.js to detect composition usage
• Add a global directive v-composable

(22/40) Which statement is TRUE about using TypeScript with the Vue 3 Composition API (non-script setup)?

---

• You can use defineComponent with a generic or pass a props interface, plus normal TS for reactive refs, etc.
• TypeScript is not supported in standard Composition API
• You must rewrite watchers in a .d.ts file
• You must use watchers for typed references

(23/40) Which approach might you take if you want typed route-based code splitting in Vue 3 with TypeScript, ensuring each lazy component is typed?

---

• Use defineExpose for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Impossible to type code-split components
• component: () => import('./views/MyView.vue') can still be typed if MyView.vue is a typed SFC, though the runtime doesn’t forcibly validate. It’s primarily compile-time checks for your .vue files

(24/40) If you have a component that toggles between multiple sub-components using a dynamic <component :is="...">, how can you preserve each sub-component's state?

---

• Wrap each in <teleport>
• Key them all the same so they share state
• Use a <keep-alive> around the dynamic <component> and ensure each sub-component is keyed properly
• Use watchers to store and restore data

(25/40) When you wrap the <router-view> in <transition> for route transitions in Vue 3, what do you need to remember regarding dynamic transitions for different routes?

---

• Impossible to do dynamic route transitions
• Use watchers in main.js for concurrency watchers
• No approach for dynamic transitions across routes
• You can conditionally set the transition name based on route meta or computed property, or use watchers in defineExpose

(26/40) If you see a Vue warning about 'Avoid mutating a prop directly since the value will be overwritten', which scenario could cause this?

---

• You used defineExpose incorrectly
• The parent used a dynamic import for the route config
• The child is modifying a prop object or array directly instead of using emit or local state
• You used v-model with a child component that does not emit the correct event

(27/40) Which Vue 3 feature allows you to watch changes in multiple refs within a single callback, without specifying dependencies manually?

---

• watchEffect()
• watch() with immediate: true
• onUpdated()
• computed() with multiple getters

(28/40) What is the purpose of the 'inheritAttrs' option in a Vue 3 component?

---

• It prevents watchers from being triggered
• It is used to create custom directives for attributes
• It defines global attributes that are inherited by all child components
• It controls whether non-prop attributes are automatically added to the component's root element

(29/40) Which Composition API method in Vue 3 is used to detect errors thrown by child components, akin to errorCaptured in Vue 2?

---

• onMountedError
• onErrorCaptured
• Vue 3 no longer supports error handling hooks
• watchEffectError

(30/40) How do you define a Composition API function so that it returns a fresh instance of reactive data each time it’s used in a new component, not shared by all components?

---

• In the composable, create and return new refs or reactive objects so each component calling it gets its own separate data
• Impossible to isolate state, it’s always shared
• Mark the data with markRaw
• Export watchers from a single module

(31/40) Which directive do you use if you want a child component to inherit a parent’s CSS classes when not declared as props, letting them pass through automatically in Vue 3?

---

• Use watchers in main.js for concurrency watchers only
• v-bind="$attrs" on the root element if inheritAttrs is false, or do nothing if inheritAttrs is true
• Use defineProps for concurrency watchers
• v-class=inherit

(32/40) How can you explicitly expose methods or properties from a Vue 3 child component to the parent when using <script setup>?

---

• Call provide() in the child for each method or prop
• Use defineExpose() and pass an object with methods or refs you want to expose
• Properties are always publicly accessible in <script setup>
• Define them in export default and they become automatically available to the parent

(33/40) How do watchers in Vue 3 handle concurrency if you define watchEffect for a large set of reactive properties, but you only want to do something for certain changes?

---

• Impossible to limit watchEffect to partial changes
• Use defineProps for concurrency watchers
• watchEffect tracks everything used in the callback, so you can add conditionals or store old values if you need partial concurrency logic
• Use watchers in main.js for concurrency watchers only

(34/40) Which approach do you use to define multiple route views at the same path, for instance a main view and a sidebar view, in Vue 3 Router?

---

• Use Named Views, e.g. { path: '/home', components: { default: HomeMain, sidebar: HomeSidebar } }
• Only one component can be mapped per route
• Use watchers for each view
• Use defineEmits for each view name

(35/40) Which statement about onErrorCaptured in Vue 3 is correct?

---

• It automatically restarts the component if an error is thrown
• It will catch only global errors, not component-level errors
• It is a Composition API hook that can handle errors from child components, similar to errorCaptured in Vue 2
• It has been removed in Vue 3 in favor of config.errorHandler

(36/40) What happens if you use an arrow function instead of a normal function for lifecycle hooks in the Options API (e.g., created: () => {...})?

---

• It prevents watchers from working
• Arrow functions don’t bind 'this' to the component instance, causing 'this' to be undefined
• Vue 3 automatically corrects the context
• It works identically with no issues

(37/40) What is one advantage of using the 'shallowRef()' function for performance in Vue 3?

---

• It disables all reactivity completely
• It deeply observes all nested references for maximum performance
• It triggers updates only when the .value is replaced, ignoring changes within the object or array assigned
• It merges watchers automatically

(38/40) Why would you choose <script setup> syntax in Vue 3 over the traditional script block with export default?

---

• It reduces boilerplate, automatically exposes refs to the template, and integrates defineProps/defineEmits macros
• It is only for SSR code
• It is mandatory in Vue 3
• It prevents watchers from functioning

(39/40) How can you define multiple v-model bindings within the same child component in Vue 3?

---

• Use a global directive v-double-model
• You cannot have more than one v-model in the same component
• Use different props named modelValue plus different emit events (e.g., update:modelValueA, update:modelValueB)
• Use watchers that track different variables

(40/40) Which approach might you use to avoid watchers in a large form if you only need to compute a derived value from multiple fields in Vue 3?

---

• Use a computed property that references all necessary fields. Computed is cached until those fields change, no explicit watchers needed
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• No approach for derived values in Vue 3

Submit