(1/25) Which hook in the Composition API is primarily used to run code after a component’s data has updated and the DOM has been re-rendered?

---

• onBeforeUnmount
• onUpdated
• onMounted
• onBeforeMount

(2/25) What is the difference between a method and a computed property when they both return the same result in a Vue 3 component?

---

• There is no difference; they behave identically
• Computed properties cache their results based on dependencies, while methods recalculate on every re-render
• Methods cache their results, while computed properties do not
• Methods are asynchronous by default

(3/25) Which of the following is recommended for handling reusability across multiple components in Vue 3?

---

• Injecting watchers everywhere
• Global watchers in main.js
• Only mixins are supported for reusability
• Composables (reusable composition functions)

(4/25) Which statement describes how watchers differ from computed properties in Vue 3 regarding performance?

---

• Watchers are cached, computed properties are not
• Watchers skip the entire reactivity system
• They are identical in caching
• Computed properties cache results and only recalc when dependencies change; watchers always run the callback on every re-render if the source changed

(5/25) When might you consider a 'functional component' in Vue 3?

---

• If the component must store user input in a local state
• If you need a stateless, purely presentational component without lifecycle hooks or internal state
• If you want to combine multiple root elements with keep-alive
• If you need the advanced features of watch() and onMounted()

(6/25) In Vue 3, which function would you use if you want to temporarily pause or isolate watchers, so they don’t run until you decide?

---

• stopAll()
• EffectScope combined with scope.stop()
• watchQueue()
• No approach to pause watchers

(7/25) Which special syntax in Vue 3 is recommended for writing a minimal boilerplate Composition API component, removing the need for return statements?

---

• <script global>
• v-once in watchers
• Options API
• <script setup>

(8/25) Which part of a Vue single-file component is responsible for styles?

---

• <style>
• <template>
• <script>
• <stylesetup>

(9/25) Which directive do you use if you want to attach multiple event listeners to an element, for example a click and a mouseover, in Vue 3?

---

• v-model
• v-if
• v-show
• v-on or the shorthand @, one for each event, like @click and @mouseover

(10/25) Which statement about watchers created with watchEffect in Vue 3 is true?

---

• They cannot run cleanup functions
• They run automatically on component mount, collecting dependencies used within the callback
• They require specifying a list of sources explicitly
• They have exactly the same behavior as computed properties

(11/25) What is the main difference between using a method versus using a computed property for filtering an array in a Vue 3 component?

---

• Computed properties are cached and only recompute on reactive dependency changes, while methods run on every render
• There is no difference; they behave identically
• Methods force an immediate re-render
• Methods cannot return filtered arrays

(12/25) Which composition function in Vue 3 is best suited for quickly executing side effects that need to run immediately, automatically tracking any reactive dependencies?

---

• computed()
• watch()
• onMounted()
• watchEffect()

(13/25) When passing a function as a prop to a child component in Vue 3, how can the child component safely invoke it?

---

• Simply call props.yourFunction() from the child, or use watchers if you need to track calls
• Bind it as v-model
• Use watchEffect for each function invocation
• Vue 3 disallows passing functions as props

(14/25) Which lifecycle hook in Vue 3 might you use to add a cleanup function for an animation or subscription when the component is removed?

---

• onErrorCaptured
• onMounted
• onBeforeUpdate
• onUnmounted

(15/25) Which directive in Vue 3 allows you to insert raw HTML into an element, but comes with security caveats?

---

• v-sanitize
• v-raw
• v-inner
• v-html

(16/25) Which syntax in the <template> block allows you to assign a ref to a DOM element in Vue 3?

---

• v-bind:ref="myElement"
• ref="myElement"
• :ref="myElement"
• v-ref="myElement"

(17/25) Which directive is used to conditionally render a block in Vue 3 templates if a certain expression is truthy?

---

• v-for
• v-bind
• v-raw
• v-if

(18/25) In Vue 3, if you want to break up large logic from a single component so it can be reused, what is a recommended approach?

---

• Create multiple <style> blocks with different scopes
• Use defineEmits to distribute logic across components
• Create composable functions that return reactive data or methods, import them in each component needing that logic
• Move logic to watchers and reference them globally

(19/25) If you want to apply transitions to a component that toggles in and out using v-if, which approach might you use in Vue 3?

---

• Wrap the toggling element or component in <transition>
• Apply Teleport to the toggling element
• Use watchers for the toggling and define your own DOM animations
• Transitions are not supported for conditionally rendered components

(20/25) In Vue 3’s script setup, how do you specify that a function can be called from outside if you want to expose it as a component method?

---

• Use defineExpose({ myMethod }) so the parent can access it via template refs
• Use watchers for concurrency
• No approach; script setup does not allow external method calls
• Use defineEmits for concurrency watchers

(21/25) How do you define watchers in a Vue 3 <script setup> if you want a deep watch on an object prop named config?

---

• No approach for deep watch in script setup
• Use defineProps for concurrency watchers
• watch(() => props.config, (newVal, oldVal) => { ... }, { deep: true })
• Use watchers in main.js for concurrency watchers

(22/25) How do you declare a typed 'props' interface when using <script setup lang="ts"> in a Vue 3 Single File Component?

---

• Create a global .d.ts file for props
• Use defineProps<{ /* typed properties here */ }>() at the top of <script setup>
• Use an emits array with watchers
• You cannot type props in Vue 3

(23/25) If you want a single route in Vue Router 4 to handle multiple dynamic segments, like /products/:category/:id, which approach do you use?

---

• Define path: '/products/:category/:id' in the routes config, then route.params.category / route.params.id are available
• Define watchers in main.js for each param
• Impossible to have multiple dynamic segments in Vue 3
• Use watchers for route changes only

(24/25) Which is a valid reason to prefer script setup over the classic setup() function in Vue 3 SFCs?

---

• They are identical in syntax with no differences
• script setup is more concise, and you don't need to return variables or methods you want to use in the template
• script setup is mandatory for watchers to work
• script setup cannot use defineProps

(25/25) Which statement best describes the role of 'scripts' in a Vue 3 project created via Vite or Vue CLI?

---

• They are only used for installing Vuex and plugins
• They define build steps and tasks in package.json for building, serving, and linting the app
• They are not used; Vue is purely template-driven
• They define watchers inside each .vue file

Submit