(1/45) What is the difference between watch(source, callback) and watchEffect(callback) regarding oldValue and newValue arguments?

---

• watchEffect never runs the callback more than once
• Both provide oldValue/newValue automatically
• watch provides oldValue/newValue to the callback, watchEffect does not
• watchEffect provides (oldValue, newValue), while watch does not

(2/45) If you need to quickly prototype a Vue 3 app in a single HTML file without a build step, which approach might you consider?

---

• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers
• Load the Vue 3 Global build (the one with the compiler) via a CDN <script> tag, then define <script> for your SFC contents or inline templates
• Impossible to run Vue 3 without a build step

(3/45) When using v-for in Vue 3, why is it generally important to provide a unique 'key' attribute on each rendered element?

---

• It registers watchers automatically
• It is optional and doesn’t affect performance
• It helps Vue identify and efficiently update or reorder the elements in the virtual DOM
• It makes reactivity disabled for that list

(4/45) How can you generate a local directive that modifies an element’s text content when it mounts, only for one component in the Options API style?

---

• directives: { myDirective: { mounted(el) { el.textContent = 'Hello'; } } } in the export default block
• Use defineExpose for directive logic
• Global directives are your only choice in Vue 3
• Use watchers for text content in defineProps

(5/45) How do you access the router instance in a Vue 3 component that uses the Composition API?

---

• Inject it from the parent with inject('router')
• Import useRouter() from 'vue-router' and call const router = useRouter() inside setup()
• Vue 3 does not allow programmatic routing
• Use onMounted(() => this.router)

(6/45) Which directive do you use in Vue 3 to dynamically bind an inline style object, for example: :style="{ color: textColor }"?

---

• v-bind:style or :style
• v-on:style
• v-model:style
• v-if:style

(7/45) Which statement is correct about watchers created with watch() in the Composition API?

---

• They cannot watch computed properties
• You must manually stop them using watch.stop()
• They only trigger once when the component is created
• They automatically clean themselves up on component unmount

(8/45) If you have a deep object in Vue 3 and you want the entire object to be reactive including nested fields, which function should you use?

---

• markRaw()
• ref() with shallow: true
• reactive()
• shallowReactive()

(9/45) How do you set up a local directive within an Options API component in Vue 3?

---

• Use watchers for directive logic
• directives: { nameOfDirective: { mounted(el, binding) { ... } } } inside export default {}
• Custom directives are removed in Vue 3
• Add the directive code in onMounted()

(10/45) Which directive do you use if you want an element’s HTML content to be interpreted as actual HTML in Vue 3, rather than text-escaped?

---

• v-show
• v-bind:html
• v-text
• v-html

(11/45) If a child component is receiving a prop that is an object, why might you consider making a local copy in the child instead of mutating the prop directly?

---

• It’s never recommended to handle object props in Vue
• Vue 3 disallows object props
• Props are read-only, so mutating them triggers a warning and can cause side effects to the parent data
• Props are deeply reactive by default, so any local changes are always overwritten

(12/45) Which method can you use to replace the current history entry in Vue Router, instead of pushing a new one?

---

• router.replace()
• router.override()
• router.back()
• router.force()

(13/45) In the Composition API, how do you create a watch that runs once initially (to fetch data) and then again on subsequent changes?

---

• Use watch(..., { immediate: true }) so it triggers on initialization and on changes
• It’s impossible to have a watch run at init time
• Use watchEffect() by default
• Use onMounted plus watchEffect for changes

(14/45) Which key advantage does Pinia have over Vuex in Vue 3 for large scale state management?

---

• Pinia disallows mutations entirely
• Vuex is no longer compatible with Vue 3 at all
• Pinia offers a more intuitive API, tree-shakeable modules, and is the recommended state solution for Vue 3
• Pinia is built directly into the Vue core, requiring no imports

(15/45) If you define a watch on a computed property in Vue 3, what will happen whenever the underlying reactive data changes?

---

• It throws an error in the console, as watchers cannot track computed props
• The watch callback for the computed property will trigger if the computed output actually changes
• It forcibly re-renders the entire app
• Computed properties are frozen, so watchers never trigger

(16/45) What does the v-model directive generally do?

---

• Creates a two-way data binding for form inputs or components
• Creates a one-way data binding from parent to child
• Attaches an event listener to an element
• Conditionally renders an element

(17/45) Which approach helps you unify stateful logic in a large codebase by grouping related code together rather than splitting it into separate Options API blocks in Vue 3?

---

• Create a global directive for each piece of logic
• Use watchers in main.js only
• script setup with watchers everywhere
• Composition API, allowing you to gather related logic in composable functions rather than data/methods/computed scattered across the Options API

(18/45) If you want to import only the reactive and computed methods from Vue 3, ignoring other features, which approach should you use?

---

• You must define them from scratch in your code
• import { reactive, computed } from 'vue'
• import everything from 'vue' since you can’t tree-shake Vue 3
• Vue 3 doesn’t allow named imports

(19/45) Which Vue 3 feature can help unify state across multiple components without requiring a large state management library, but still be globally accessible?

---

• Inject watchers for each component
• All state must be local in Vue 3
• Export a simple reactive or ref object from a shared module, and import it in multiple components (a mini-store)
• Use defineProps in main.js

(20/45) What does onErrorCaptured() in Vue 3 allow you to do?

---

• Watch for route changes only
• Capture and handle errors from child components in a granular way
• Remove reactivity from arrays
• Replace global error handling with watchers

(21/45) What is the correct way to define a reactive state for an object using the Composition API?

---

• const state = reactive({})
• const state = watch({})
• const state = new Proxy({})
• const state = Vue({})

(22/45) If you see an error like "Avoid mutating a prop directly" in Vue 3, how can you fix it?

---

• Props are read-only in Vue 3; no workaround is possible
• Use watchers to forcibly track the mutation
• Switch to Vue 2, which allows direct prop mutation
• Make a local copy of the prop in data or a ref, modify that, and emit changes to the parent if necessary

(23/45) How can you create a watch that immediately runs once on component initialization, then again whenever the reactive source changes in Vue 3?

---

• Use watchers with flush: 'sync'
• Use watchEffect() with onMounted() together
• Use watch() with { immediate: true }
• Watchers cannot run on initialization in Vue 3

(24/45) When using Vue 3’s Teleport feature, how do you specify the destination for teleportation?

---

• <teleport to="#some-target"> ... </teleport>
• Use <teleport :destination="elementRef">
• Teleport does not allow specifying a target dynamically
• <teleport name="someTarget"> ... </teleport>

(25/45) If a Vue 3 component has a custom event 'save' declared in its emits array, how is it typically emitted?

---

• emits.save() is automatically provided by Vue
• emit('save') from within setup(), or this.$emit('save') in Options API
• Vue automatically calls 'save' when data changes
• this.save()

(26/45) Which file or location typically holds the top-level router configuration (routes array, createRouter call) in a Vue 3 + Vue Router project?

---

• App.vue
• main.ts only
• router/index.js or router.ts
• store.js

(27/45) Which of the following statements about Vue's reactivity system is TRUE?

---

• Vue 3 no longer supports reactivity.
• Vue requires manual dependency tracking for each variable.
• Vue does not track changes in arrays.
• Vue uses proxies in Vue 3 to track reactivity.

(28/45) Which feature in Vue 3 allows you to define typed functions for your component events in a <script setup lang="ts"> block, ensuring the payload matches a specified interface?

---

• defineExpose
• watchEffect
• defineEmits
• defineProps

(29/45) Which directive in Vue 3 can help you quickly toggle the display property without removing the element from the DOM?

---

• v-model
• v-bind:class
• v-if
• v-show

(30/45) In Vue 3, which special attribute helps keep track of elements when rendering a list with v-for to improve performance?

---

• index
• key
• id
• ref

(31/45) What is one benefit of using 'lazy loading' for route components in a large Vue 3 application?

---

• It removes the need for a router altogether
• It disables the use of watchers in those components
• It merges all components into a single large bundle
• It reduces the initial bundle size, loading the component code only when the user visits that route

(32/45) Which directive in Vue 3 can you use to handle a custom event with a dynamic event name, for example v-on:[eventName]?

---

• v-on:[eventName]
• v-model:[eventName]
• v-bind:rawEvent
• v-if:[eventName]

(33/45) Which statement is TRUE about 'teleport' usage in Vue 3?

---

• You can teleport an element to any CSS selector in the DOM, e.g. <teleport to="#modal">
• Teleport does not preserve reactivity in the teleported content
• Teleport is only used for server-side rendering
• Teleport always duplicates the component in both parent and target

(34/45) Which statement about using the v-model directive on custom components in Vue 3 is TRUE?

---

• By default, Vue 3 expects props: ['modelValue'] and emits: ['update:modelValue']
• It is replaced by provide/inject for two-way binding
• It uses props: ['value'] and emits: ['input'] by default, just like Vue 2
• v-model no longer works on custom components in Vue 3

(35/45) What is the difference between using a method and a computed property for data transformation in a Vue 3 component?

---

• Computed properties must return a Promise
• Computed properties cache their results based on dependencies, methods do not
• Methods cannot access reactive data
• Methods can be cached, while computed properties are called every time

(36/45) Which statement about watchers for computed properties in Vue 3 is correct?

---

• Watching a computed property is valid, but you might consider watchEffect() or direct watchers on the underlying reactive data
• Computed properties are not reactive in Vue 3
• A computed property triggers watchers at random intervals
• You cannot watch a computed property

(37/45) Which feature in Vue 3 helps you avoid the 'props drilling' issue when passing data through many nested child components?

---

• global watchers
• v-for loops
• template ref forwarding
• provide/inject

(38/45) In Vue 3, if you have a custom component that needs to accept arbitrary HTML content from the parent, which feature do you use?

---

• emits array
• props array
• slots or named slots
• watchers that capture DOM

(39/45) What is the easiest way to define a root component that uses multiple child components in Vue 3’s script setup?

---

• Use watchEffect for each child component import
• Use the components property in export default {}
• Import them in <script setup> and simply use them in the template (no need to register explicitly)
• Declare all children in the global scope

(40/45) Which directive might you use if you only want to render some text once, ignoring future changes to the data in Vue 3?

---

• v-html
• v-if
• v-show
• v-once

(41/45) Which Vue 3 lifecycle hook might you choose to stop timers or remove event listeners right before the component is unmounted?

---

• onDeactivated
• onBeforeUnmount
• onMounted
• onUpdated

(42/45) Which statement accurately describes what the Composition API is in Vue 3?

---

• Only used for SSR rendering
• A mandatory new syntax that replaced the Options API entirely
• A library separate from Vue 3 for advanced watchers
• An optional syntax that lets you group logic by feature rather than by lifecycle options

(43/45) How do you pass a CSS class to a component that doesn't have a matching prop for 'class' in Vue 3 (Options API)?

---

• You must define a class prop explicitly
• Use $attrs in the child or inheritAttrs: true, so the non-prop 'class' attribute goes to the root element
• Apply watchers to assign classes
• Vue 3 discards any 'class' attributes not matched by a prop

(44/45) Which function might you call in Vue 3 if you need to force DOM updates to complete before running code that depends on them?

---

• awaitDomUpdates()
• refreshDOM()
• nextTick()
• onRender()

(45/45) In a standard Vue CLI project, which file usually imports and mounts the root App component?

---

• store.js
• router.js
• index.html
• main.js

Submit