(1/25) How do you define a custom directive that only needs to run code when the bound element is inserted into the DOM in Vue 3?

---

• Use watchers in defineExpose
• Use v-model on the directive
• Use the directive’s mounted hook, e.g. mounted(el, binding) { ... }
• v-once directive

(2/25) Which directive would you use to add dynamic styles to an element in Vue 3 templates?

---

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

(3/25) Which directive do you use if you want to conditionally render a block that physically adds/removes elements in the DOM in Vue 3?

---

• v-text
• v-model
• v-show
• v-if

(4/25) What’s a key benefit of using the Composition API in a large Vue 3 project?

---

• It removes the need for any lifecycle hooks
• It enforces a single root component for the entire app
• It automatically converts watchers into computed properties
• It allows better logic organization and reusability via composable functions, rather than scattering logic across multiple Options API blocks

(5/25) Which statement about watchers for dynamic route params in Vue 3 using the Composition API is correct?

---

• Use watchers in main.js only
• You can import { useRoute } and do watch(() => route.params.someParam, (newVal, oldVal) => ...) in setup()
• They only trigger once on mount
• No approach to watch route params in Vue 3

(6/25) Which property in a Vue 3 Single File Component allows you to scope CSS to that specific component only?

---

• global="true"
• scoped
• lang="ts"
• module

(7/25) How do you define watchers for route changes if you are using the Options API in Vue 3?

---

• Define watchers in main.js only
• Inject watchers with defineProps
• Use watch: { '$route'(to, from) { ... } } in export default
• It is impossible with the Options API

(8/25) Which statement describes how the 'globalProperties' feature works in Vue 3?

---

• app.config.globalProperties can store properties or methods accessible as this.$myProperty in any Options API component
• It sets up watchers for global error handling
• It must be used inside script setup only
• It replaces the need for watchers entirely

(9/25) What does the keep-alive component in Vue 3 do for dynamic components or components rendered via v-if?

---

• It caches the component instance so that state is preserved when the component is toggled in or out
• It automatically wraps them in watchers
• It disables reactivity for those components
• It forcibly re-renders the component on every toggle

(10/25) Which Composition API function might you use if you only need to watch a single ref, ignoring all other reactivity?

---

• watch(() => myRef.value, callback)
• markRaw(myRef)
• computed(() => myRef.value)
• watchEffect

(11/25) Which directive do you use to attach a click event on an element in a Vue 3 template?

---

• v-html:click
• v-if:click
• v-model:click
• v-on:click

(12/25) Which directive do you use if you need to bind the value of a text input in a template for two-way data binding, e.g. <input type="text" ...> in Vue 3?

---

• v-if:input
• v-on:text
• v-model
• v-bind:input

(13/25) Which statement regarding fragments in Vue 3 is TRUE?

---

• Fragments must always be rendered as an array
• Fragments are not supported in Vue 3
• Fragments allow a component to return multiple root nodes in its template
• Fragments only work in functional components

(14/25) Which file typically contains the root Vue instance (or app) in a standard Vue CLI project?

---

• index.html
• router.js
• main.js (or main.ts)
• App.vue

(15/25) Which directive in Vue 3 do you use to manually set HTML content, bypassing Vue’s mustache syntax and potential sanitization concerns?

---

• v-html
• v-inner
• v-bind:html
• v-bind.raw

(16/25) Which statement about using a type property (prop: { type: Something }) is correct in Vue 3 with JavaScript (no TypeScript)?

---

• It checks the data type at runtime, warning if it’s invalid
• It forces the property to always be that type with no warnings
• It compiles time checks only in .ts files
• Type definitions are not supported in plain JS

(17/25) In Vue 3, what does the toRaw() function do?

---

• Converts a raw object into a ref
• Removes reactivity and returns the original proxy’s underlying object
• Tracks dependencies for watchers automatically
• Converts watchers into computed properties

(18/25) In Vue 3, if you must run a piece of code every time a certain set of reactive variables change, which approach is better: watch() or computed()?

---

• Use watchers for pure transformations
• Always use computed() for side effects
• computed() if you need a reactive cached value, watch() if you need side effects
• They are identical in usage

(19/25) Which directive is used for two-way data binding with standard HTML inputs in Vue 3?

---

• v-bind:html
• v-on
• v-for
• v-model

(20/25) Which Vue 3 concept is used to define logic or data that should be reused across multiple components, often exported as a plain function?

---

• WatchEffect
• Composable (Composition Function)
• Mixin 2.0
• Filters

(21/25) If you have a reactive object user in Vue 3, and you want to create a separate ref that points to user.name, which function do you use?

---

• setRef(user, 'name')
• toRef(user, 'name')
• shallowRef(user.name)
• useExpose(user.name)

(22/25) Which advantage does Pinia have over Vuex 3/4 in a Vue 3 application?

---

• Vuex is not compatible with Vue 3 at all
• Pinia is lighter, modular, uses defineStore, and is considered the recommended store solution going forward
• Pinia is built into Vue core, no need to install it
• Pinia only handles watchers for form inputs

(23/25) Which method from the Vue Router instance in Vue 3 can replace the current history entry without creating a new one?

---

• router.goto()
• router.use()
• router.redirect()
• router.replace()

(24/25) When defining a Pinia store in Vue 3, which section is typically used to define reactive state variables?

---

• module
• setup()
• state()
• inject()

(25/25) Which function in Vue 3 can transform a single property from a reactive object into a separate ref?

---

• makeRef()
• toRef()
• mapRef()
• refProperty()

Submit