(1/15) In the Vue 3 Composition API, what does the returned value of setup() represent?

---

• Default exports for the component
• A new instance of Vue
• Lifecycle hooks only
• Properties and methods that become available in the template

(2/15) Which of the following is NOT a lifecycle hook in the Vue 3 Composition API?

---

• onMounted
• onUpdated
• onCancelled
• onUnmounted

(3/15) In a Vue 3 Single File Component, how do you ensure that certain styles only apply globally instead of being scoped to the component?

---

• Use <style scoped> for global styles
• Simply omit the 'scoped' attribute in the <style> block
• Use watchers to share styles
• Write a v-global directive

(4/15) Which statement best describes how you might handle multiple root-level elements in a <template> in Vue 3?

---

• They must be enclosed in a <transition-group> container
• You must wrap them in <template v-if> always
• Vue 3 disallows multiple roots
• You can have multiple siblings at the top level thanks to fragments, but each must have a key if used inside a v-for context

(5/15) Which approach helps avoid watchers if you only need to do something once after the component is first rendered in Vue 3 Composition API?

---

• No approach for one-time tasks in Vue 3
• Use defineExpose for concurrency watchers
• onMounted hook for one-time DOM-dependent tasks
• Use watchers in main.js for concurrency watchers only

(6/15) Which directive do you use if you want to conditionally render an element in Vue 3 by removing it from the DOM entirely when the condition is false?

---

• v-show
• v-model
• v-if
• v-for

(7/15) In Vue 3, how can you pass in a default slot's content and still provide a named slot content to a child component?

---

• Vue 3 does not allow both default and named slots in the same component
• You can’t have a default slot if you have named slots
• Combine <slot> and <slot name="something" /> in the child component, and fill them in the parent template
• You must use multiple <template> blocks in the parent with v-model

(8/15) Which feature in Vue 3 helps you debug and inspect reactive dependencies in the browser?

---

• No official debugging options are available
• Vue CLI logs
• Chrome Lighthouse
• The official Vue DevTools extension

(9/15) How do you disable the automatic attribute inheritance onto a child component's root element in the Options API of Vue 3?

---

• Use watchers in main.js only
• No approach for attribute inheritance in Vue 3
• Use defineProps for concurrency watchers
• inheritAttrs: false in the component’s export default config

(10/15) What is the typical reason for using provide/inject in Vue 3, rather than passing props down multiple layers?

---

• To disable reactivity in child components
• To force watchers on every child component
• To share data or services across deeply nested components without prop drilling
• To automatically load dynamic imports in each child

(11/15) In the Options API for Vue 3, which lifecycle hooks correspond to the old beforeMount and mounted from Vue 2?

---

• Use defineProps for concurrency watchers
• No differences in Options API: it’s still beforeMount, mounted
• onMounted, onBeforeUnmount
• Use watchers in main.js for concurrency watchers

(12/15) How do you define watchers for the children array in a <transition-group> if you want to log every time the list items reorder in Vue 3?

---

• Use defineProps for concurrency watchers
• Impossible to detect reorder changes with watchers
• Use watchers in main.js for concurrency watchers
• Watch the array or the items if you only care about reorder changes. Possibly watch(() => items.map(...), callback) to detect reordering

(13/15) Which pattern is recommended for conditionally applying multiple inline styles in Vue 3 templates?

---

• Use an object or array syntax with v-bind:style, e.g. :style="[{ color: textColor }, inlineStyleVar]"
• Use a single string with semicolons only
• Inline styles are not supported in Vue 3
• Use watchers to manipulate the style attribute directly

(14/15) Which directive might you use if you want an element to only appear in the DOM if a condition is true, but remain in the DOM toggled by CSS display otherwise in Vue 3?

---

• v-model
• v-for
• v-if
• v-show

(15/15) Which statement about watchers in the Composition API is correct when you pass a ref or reactive getter as the first argument?

---

• It automatically receives (newValue, oldValue) in the callback whenever that ref changes
• You must manually call .value each time to see changes
• It triggers only once on mount, ignoring future changes
• You cannot watch ref variables directly

Submit