(1/15) How do you define a ref with an initial value of an empty array in Vue 3 using the Composition API?

---

• const array = watch([])
• const array = reactive([])
• const array = ref([])
• No approach for arrays in Vue 3

(2/15) What does the useAttrs() function in the Composition API return?

---

• The route query parameters
• The list of watchers in the current component
• An object containing attributes passed from a parent that are not recognized as props
• It returns the globalProperties config

(3/15) Which feature in Vue 3 allows you to run code that automatically tracks and responds to any reactive dependencies it touches?

---

• computedProperties()
• watchEffect()
• refEffect()
• syncEffect()

(4/15) Which directive might you use if you want to quickly iterate over an object’s keys and values in a template, e.g., <div v-for="(value, key) in myObject" :key="key"> in Vue 3?

---

• v-model
• v-bind
• v-for
• v-html

(5/15) Which approach might you use to quickly toggle a style or class if your logic only requires display toggling in Vue 3?

---

• Use v-show if you want to keep the element in the DOM with display: none toggling
• Use watchers for concurrency
• Use watchers in defineExpose for style changes
• Use defineEmits for toggling classes

(6/15) If you must compute a value based on multiple reactive variables in Vue 3, which composition function is typically used?

---

• computed(() => { ... }) with those variables used inside the function
• onMounted() with watchers
• watchMulti()
• Use toRef for each variable and chain them

(7/15) Which of the following statements about Teleport in Vue 3 is correct?

---

• It only works with functional components
• It duplicates the child component in two places
• It completely moves the child component’s DOM to a different location while preserving reactivity and parent-child relationship
• It breaks reactivity for the teleported component

(8/15) What is the primary use case for the 'teleport' feature in Vue 3?

---

• To render a component's template in a separate location in the DOM tree
• To manage watchers in nested components
• To distribute props to multiple child components
• To lazy load components automatically

(9/15) What is the recommended way to bundle a production-ready Vue 3 app using the latest tooling?

---

• Vue 3 has no recommended build process
• Include the vue.js script from a CDN and code everything in a single HTML file
• Manually run Babel on each .vue file
• Use Vite or Vue CLI (which uses Webpack under the hood) to build a production bundle

(10/15) How does the Vue 3 compiler handle plain text or static attributes in the template for performance?

---

• It wraps them in watchers to track changes
• They are re-rendered on every single state change by default
• They are automatically hoisted as static nodes so Vue can skip patching them on updates
• Vue 3 no longer supports static text in templates

(11/15) Which library is typically recommended by the Vue core team as the next-generation state management solution for Vue 3?

---

• Pinia
• Vuex 2
• Redux
• MobX

(12/15) Which directive do you use if you want to create dynamic components using the <component :is="someComponent" /> element in Vue 3?

---

• v-if
• v-model
• v-is
• The built-in <component :is="" /> mechanism is not a directive but a component feature. So no directive is needed

(13/15) How do you apply two-way binding on a custom component using Vue 3’s v-model syntax?

---

• <ChildComponent v-bind="myValue" @input="myValue = $event" />
• v-model is only for native HTML inputs, not components
• <ChildComponent v-model="myValue" /> with a 'modelValue' prop and 'update:modelValue' event
• <ChildComponent :model="myValue" @change="myValue = $event" />

(14/15) Which approach helps avoid repeating the same watchers or computed logic across multiple components in Vue 3?

---

• Use a composable function that returns the watchers or computed properties
• Use defineEmits for watchers
• Use watchers in main.js for all repeated logic
• Write a global directive that merges watchers

(15/15) Which directive is used to bind attributes or props dynamically in Vue 3?

---

• v-once
• v-bind
• v-for
• v-if

Submit