(1/25) In Vue 3, if you want to watch changes to route.query parameters, which approach can you use in a setup() function?

---

• Query parameters cannot be watched in Vue 3
• Manually parse window.location.search in watchEffect
• Use watch(() => route.query, (newVal) => { ... }) after importing useRoute()
• Use onBeforeUnmount with a watcher callback

(2/25) Which statement about v-bind:class (or :class) in Vue 3 is correct?

---

• It is removed in Vue 3, replaced by watchers
• It can accept strings, objects, or arrays for conditional or multiple class bindings
• It only supports a string value
• It cannot be used for conditional logic

(3/25) Which statement best explains how watchers differ from watchEffect if you want to see both oldValue and newValue in Vue 3?

---

• watchEffect auto-provides oldValue/newValue, watch does not
• Both supply oldVal/newVal automatically
• watch can provide oldVal/newVal, watchEffect does not supply them directly
• They are identical in all aspects

(4/25) Which statement accurately describes the difference between a method in the Options API and a function within setup() returning an object in the Composition API?

---

• A Composition API returned function is typically used directly in the template or with script setup scope, rather than being invoked via this.methodName
• They are identical in usage and syntax
• Methods are asynchronous, but Composition functions are always synchronous
• A method cannot reference data(), while a Composition API function can

(5/25) Which statement best describes 'slots' in a Vue 3 child component?

---

• They are placeholders that the parent fills with its own template content
• They automatically produce watchers for all nested components
• They are used to override parent component data
• They replace directives for dynamic content insertion

(6/25) Which Vue 3 concept is described as a function that returns reactive state or logic, intended for reuse across multiple components?

---

• Mixin
• Directive
• Global Plugin
• Composable (Composition Function)

(7/25) Which directive might you use if you want to dynamically toggle a single class name in Vue 3 based on a boolean condition isActive?

---

• v-bind:class="{ active: isActive }"
• v-on:class="isActive"
• v-if:class
• v-html

(8/25) In Vue 3, which special attribute can you use in a <script> block to parse it as a TypeScript file in an SFC?

---

• lang="ts"
• scoped
• type="typescript"
• is="ts"

(9/25) In Vue 3, how do you define multiple custom events (emits) for a single component using the Options API?

---

• Use a custom directive for multiple events
• You must define them globally in main.js
• emits: ['eventOne', 'eventTwo'] in the component definition
• Use watchers for each event

(10/25) Which directive do you use in Vue 3 if you want to prevent the default action on a form submit event in the template, as a shorthand for @submit.prevent?

---

• v-on:submit.prevent
• v-if:submit
• v-model:submit
• v-bind:prevent

(11/25) In a Vue 3 single-file component using script setup, which macro is used to declare which props the component accepts?

---

• defineExpose
• defineEmits
• defineProps
• exposeProps

(12/25) Which Vue 3 function returns a read-only version of a ref, preventing external code from modifying its value directly?

---

• readonlyRef()
• toRef()
• shallowRef()
• readonly()

(13/25) How do you properly define a composable in Vue 3 so that it can be reused in multiple components?

---

• Create a new .vue file for each composable with <script setup>
• Use watchers in main.js for each composable
• Define a global directive that encapsulates the logic
• Export a plain function from a .js or .ts file that uses the Composition API (ref, reactive, computed, etc.) and returns needed properties

(14/25) Which statement about watchers is correct if you do watch(() => props.active, callback) in a child component using script setup in Vue 3, ignoring oldVal?

---

• Props never trigger watchers
• The callback signature can omit oldVal if you only need newVal or concurrency logic with onInvalidate
• Use watchers in main.js for concurrency watchers only
• Impossible to watch props in script setup

(15/25) Which approach might you use to store user authentication data so multiple components in a Vue 3 SPA can access it easily?

---

• Use either Pinia (defineStore), Vuex, or a shared composable that exports a reactive object with user info
• Use the built-in Auth directive in Vue 3
• Store in a global variable window.authData only
• Use watchers in each component to sync data

(16/25) If a Vue 3 project uses .env files, how do you access an environment variable (e.g., VITE_API_BASE) in your components?

---

• document.querySelector('#env-VITE_API_BASE').value
• process.env.VITE_API_BASE
• Use watchers in main.js to inject them
• import.meta.env.VITE_API_BASE

(17/25) Which Vue 3 function helps you unwrap refs inside an object so that reading properties doesn’t require .value syntax in the template or console?

---

• toRaw()
• unref()
• exposeRefs()
• shallowRef()

(18/25) In Vue 3, which feature can you use to export and import reactive state from a single file, effectively creating a light-weight shared store without Vuex or Pinia?

---

• No approach other than Vuex or Pinia exists
• Simply exporting reactive() or ref() from a module and importing it in multiple components
• Provide/Inject only
• Scripts with watchers

(19/25) In Vue 3, how would you best describe the difference between an Options API method and a Composition API function returned from setup()?

---

• Composition API functions cannot access reactive data
• Options API methods are always async
• Composition API doesn’t allow any function definitions
• Options API methods are bound to 'this', while Composition API returned functions are typically called from the returned object or script setup scope

(20/25) Which directive do you use if you want to manage two-way data binding on a select element or radio input in Vue 3?

---

• v-on:change
• v-model
• v-if
• v-bind:options

(21/25) Which approach is correct when you need an effect that runs only once on component mount (not on subsequent updates) in Vue 3 Composition API?

---

• Use onBeforeUnmount instead
• watchEffect(() => { ... }, { flush: 'post' })
• onMounted(() => { ... })
• You must define a custom directive for one-time effects

(22/25) In Vue 3, which built-in component can wrap multiple dynamic components or elements and apply transitions for items entering or leaving the DOM?

---

• TransitionGroup
• Teleport
• KeepAlive
• TransitionOne

(23/25) Which directive in Vue 3 allows you to bind a single variable or computed property to an input’s value for two-way data binding?

---

• v-on
• v-model
• v-for
• v-if

(24/25) Which lifecycle hook in the Composition API can be used to run code after each re-render caused by reactive state changes?

---

• onActivated
• onUpdated
• onMounted
• onBeforeUnmount

(25/25) Which Composition API function is used for performing side effects in Vue 3 without specifying an explicit source, collecting dependencies from the callback body automatically?

---

• computed()
• watchEffect()
• onErrorCaptured()
• reactive()

Submit