(1/45) If you define a teleported modal in Vue 3, how can you ensure it still references data from its parent component in code, even though the DOM is moved?

---

• Use defineEmits to forcibly pass data
• Impossible, Teleport breaks parent references
• Props and reactivity remain intact logically; Teleport only changes the rendered location, not the data flow
• Use watchers to rebind each property

(2/45) Which statement about dynamic imports in Vue 3 is TRUE?

---

• They always load all modules synchronously at app startup
• They only work in Node.js, not in browsers
• They allow for code-splitting by returning a Promise that resolves to a module
• They can only be used for CSS files

(3/45) When referencing a DOM element with a template ref in Vue 3 Composition API, how do you access it in onMounted?

---

• const myRef = watchers({}, ...)
• const myRef = ref(null); <div ref="myRef" />. Then in onMounted(() => { console.log(myRef.value) });
• Use defineExpose for each DOM ref
• Impossible to reference DOM elements in the Composition API

(4/45) How do you define watchers for route changes in an Options API component if you only want them to run after navigation (not on mount), in Vue 3?

---

• Impossible to watch route changes in Options API
• Use defineProps for concurrency watchers
• In watch: { '$route': { immediate: false, handler(newVal, oldVal) { ... } } } so it does not run on creation
• Use watchers in main.js for concurrency watchers only

(5/45) Which statement accurately describes how watchers in Vue 3 differ from watchers in Vue 2 for array mutations?

---

• In Vue 2, we needed special handling for array mutations. In Vue 3, push/splice triggers watchers referencing the array without deep watchers, due to proxy-based reactivity
• Use watchers in main.js for concurrency watchers only
• Arrays are not reactive in Vue 3
• No difference at all

(6/45) In a Vue 3 Single File Component, how can you define a template block that only renders if a certain variable is true, but doesn’t consume any extra wrapper element?

---

• Use a watchEffect that toggles DOM injection
• Vue 3 does not allow if-blocks on template tags
• Use <component :is="condition ? 'div' : ''"> ... </component>
• Use a <template v-if="condition"> ... </template>

(7/45) Which statement accurately describes the difference between onMounted and onBeforeMount in a Vue 3 component?

---

• onBeforeMount runs right before the initial render, onMounted runs after the component’s DOM is inserted
• They are aliases in Vue 3
• onMounted runs before the component is rendered, onBeforeMount runs after it’s been rendered
• onMounted no longer exists in Vue 3

(8/45) Which directive do you use if you want to dynamically switch an element’s text color, e.g., <p v-bind:style="{ color: dynamicColor }"> in Vue 3?

---

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

(9/45) Which approach in Vue 3 helps you reuse code that references reactive data across multiple components without using mixins?

---

• onMounted watchers
• Composables (Composition functions) exporting refs or reactive objects
• Only defineExpose in <script setup>
• Global watchers in main.js

(10/45) When referencing $attrs in Vue 3 Composition API, how do you retrieve it in setup() if you set inheritAttrs: false?

---

• Import and call const attrs = useAttrs() from 'vue'
• this.$attrs is available by default in Composition API
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers

(11/45) When might you define a route meta field in Vue Router 4 for a Vue 3 application?

---

• To define watchers for concurrency across multiple routes
• To store watchers for environment variables
• Vue 3 removed meta fields from the router
• To store route-specific info like requiresAuth, layout, or custom data, accessible in navigation guards or route components via route.meta

(12/45) Which Vue 3 feature is described as a system to group multiple effects together so you can control or stop them all at once?

---

• Effect groups in main.js
• Reactive clusters
• EffectScope
• Watcher bundling

(13/45) When using Vue 3, how do you execute code after the component’s DOM has been rendered for the first time?

---

• onBeforeUnmount
• onDeactivated
• onBeforeMount
• onMounted

(14/45) Which statement correctly describes how to add a custom directive locally to a single component in Vue 3 using the Options API?

---

• You can only add global directives with app.directive
• Directives are replaced by composables in Vue 3
• Use defineDirective in <script setup>
• directives: { myDirective: { mounted(el, binding) { ... }, ... } } in the export default

(15/45) Which statement about using multiple v-if/v-else-if conditions in a Vue 3 template is correct?

---

• They must be placed inside a <transition> wrapper
• Only one block is rendered at a time, matching the first true condition
• You must replace them with watchers in the script
• Vue 3 cycles through each condition, rendering all that are true

(16/45) Which statement about onUnmounted vs. onBeforeUnmount is correct in Vue 3?

---

• They are aliases
• onBeforeUnmount runs before removing the component from the DOM; onUnmounted runs after it’s been removed
• onUnmounted is called right before the component is unmounted, onBeforeUnmount after the DOM removal
• onBeforeUnmount doesn’t exist in Vue 3

(17/45) If you want a watcher to run on both mount and subsequent changes, which watcher option should you use in Vue 3?

---

• immediate: true
• sync: true
• deep: true
• flush: 'pre'

(18/45) Which method of a Pinia store in Vue 3 is typically used to change state in a more structured manner, similar to Vuex mutations?

---

• store.apply()
• store.commit()
• store.patch()
• Pinia does not support state changes

(19/45) When referencing a typed ref in Vue 3, how do you handle the fact that it might be null before the component is mounted?

---

• Use watchers in main.js only
• Use union type, e.g. ref<HTMLDivElement | null>(null), checking if ref.value is non-null before usage
• You can't; typed refs can't be null
• Use defineProps for concurrency watchers

(20/45) Which approach might you use to debug complex reactivity flows in a Vue 3 application?

---

• Vue 3 has no built-in debugging features
• Inject watchers in main.js for every variable
• Use the official Vue DevTools extension, which supports Vue 3 reactivity inspection
• Print everything to the console in each lifecycle hook

(21/45) Which directive might you use if you want to apply multiple classes to an element only if a certain condition is true, and remove them otherwise in Vue 3?

---

• v-on:class
• v-if:classes
• v-bind:class or :class="condition ? ['class1','class2'] : []"
• v-model:class

(22/45) Which Vue 3 directive might you use if you want to set the raw HTML content of a <div> from a property named rawHtml?

---

• v-on="rawHtml"
• v-model:html="rawHtml"
• v-html="rawHtml"
• v-text="rawHtml"

(23/45) If you need to pass a function from a parent component to a child, how would you typically do it in Vue 3?

---

• Inject it via the globalProperties in main.js
• Vue does not allow passing functions
• Pass it as a prop (the parent can define the function in its methods or setup and pass it down)
• Use a custom directive that references the parent’s function

(24/45) In Vue 3, which function is typically used to define a store in Pinia as an alternative to Vuex?

---

• defineStore() from 'pinia'
• createStore() from 'vuex'
• usePiniaStore() from 'vue'
• Pinia is not compatible with Vue 3

(25/45) If you want to detach a child component’s style from the parent’s global CSS in Vue 3, which approach could you use?

---

• Use <style global> inside the child
• Use <style scoped> or the new 'v-slotted' approach
• This is not possible in Vue 3
• Use watchers to remove parent styles at runtime

(26/45) How does Vue 3 treat performance warnings in development mode?

---

• They appear in the console to guide developers about performance bottlenecks
• They cause the app to crash immediately
• They are completely disabled by default
• They can be enabled by using a special plugin

(27/45) What is the primary reason for adding 'key' attributes on elements in a v-for loop in Vue 3?

---

• To help Vue track the identity of each node for more efficient updates and reordering
• To define custom directives on each item
• To enable watchers for each item
• To disable reactivity for that list

(28/45) What is the main purpose of the setup() function in the Composition API?

---

• To set up reactive data and logic before the component is created
• To create watchers only
• To define computed properties only
• To render the component’s template

(29/45) Why might you choose watch() over watchEffect() if you have a single ref source in Vue 3 but need to compare old and new values?

---

• watch() blocks reactivity, while watchEffect() does not
• watchEffect() always runs after onUnmounted
• watch() is no longer supported in Vue 3
• watch() provides (newVal, oldVal), while watchEffect() does not

(30/45) Which statement about v-show vs. v-if is correct in Vue 3?

---

• They are identical in behavior and performance
• v-if keeps the element in the DOM but toggles CSS display, while v-show removes it entirely
• v-if is used only for arrays, v-show only for single elements
• v-show toggles CSS display, while v-if adds/removes the element from the DOM

(31/45) If you have a parent and child component, and the child modifies an object prop directly, why might that be discouraged in Vue 3?

---

• The parent instantly unmounts
• Vue 3 automatically blocks any changes to props in the child
• The child loses its reactivity
• It can lead to unexpected side-effects or shared state mutation, violating one-way data flow

(32/45) What is a primary reason to choose script setup over a standard <script> block in Vue 3 Single File Components?

---

• It removes support for TypeScript
• It automatically registers global components
• It allows you to skip returning variables from setup, making your template variables directly accessible
• It disables reactivity

(33/45) Which statement about script setup’s 'defineEmits()' macro in Vue 3 is TRUE?

---

• It must be declared at the top level inside <script setup> and can define one or more events the component emits
• It is used to define custom directives
• It can only define a single event at a time
• It removes the need for watchers entirely

(34/45) Which statement about watchers referencing an entire object is accurate if you do watch(() => bigObjectRef.value, callback) in Vue 3?

---

• They only see reference changes unless you specify deep: true, which can be expensive if bigObjectRef is large
• No approach to watch an entire object in Vue 3
• They see partial changes automatically at deep levels
• Use watchers in main.js for concurrency watchers only

(35/45) Which statement about watchers for array mutation in Vue 3 is correct if you only watch the array reference?

---

• Proxy-based reactivity in Vue 3 means push/splice triggers watchers if you watch the array reference itself (no deep needed for the array methods to trigger changes)
• Use watchers in main.js for concurrency watchers
• Push/splice do not trigger watchers unless deep: true is set or you reassign the array reference
• Arrays are not reactive in Vue 3 watchers

(36/45) In Vue 3, which lifecycle hook is typically used to gracefully handle side effects after the component is fully rendered to the DOM for the first time?

---

• onMounted
• onServerPrefetch
• onBeforeMount
• onBeforeUpdate

(37/45) Which statement about using defineProps() and defineEmits() in a <script setup> block is correct?

---

• They must be used only in the Options API
• They replace the entire Composition API
• They require special watchers to function
• They are macros compiled away at build time, so you do not see them at runtime

(38/45) What is the typical method used to create a Vue instance in Vue 3?

---

• Vue.create()
• createVueApp() from 'vue-app'
• new Vue()
• createApp() from 'vue'

(39/45) Which plugin or library is recommended by the Vue team for advanced form validation in Vue 3?

---

• VueForm 1.0
• vee-validate or vuelidate (both have Vue 3 versions)
• No official suggestions exist for form validation
• Use watchers exclusively

(40/45) How do you set the name of a component for DevTools inspection if you are writing a plain <script> block (not <script setup>) in Vue 3 with the Composition API?

---

• Inside defineComponent({ name: 'MyComp', ... })
• Use watchers in main.js for concurrency watchers
• Use defineExpose for concurrency watchers
• No approach to set a name in Vue 3

(41/45) Which command is typically used to run unit tests in a Vue 3 project scaffolded by the Vue CLI (with Jest testing)?

---

• npm run e2e
• npm run test:unit
• npm run serve
• npm run watch-tests

(42/45) Which Composition API function can you use to define a reactive integer that triggers UI updates when changed in Vue 3?

---

• shallowRef(0)
• createApp(0)
• markRaw(0)
• ref(0)

(43/45) Which special directive might you use to prevent re-rendering an element in Vue 3 after its initial render?

---

• v-html
• v-if
• v-once
• v-bind.sync

(44/45) Which method would you call to navigate back in history with Vue Router 4 from a Composition API component in Vue 3?

---

• useRoute().pop()
• router.back() after calling const router = useRouter()
• this.$router.go() is mandatory
• Define watchers in main.js for concurrency

(45/45) Which function in the Composition API returns a 'getter/setter' pair that calculates a derived state from other reactive data?

---

• computed()
• reactive()
• ref()
• unref()

Submit