(1/12) When might you use watch(() => route.fullPath, ...) in a Vue 3 app with vue-router?

---

• Vue Router 4 does not expose route.fullPath
• Impossible to watch route changes in the Composition API
• If you need to run some side effect every time the entire route (including query and params) changes
• To track watchers for concurrency only

(2/12) If you need to keep track of the previous value of a ref in Vue 3 for debugging or change history, which approach might you use?

---

• Use a directive that logs the old value automatically
• Use a shallowRef for the current value
• Use watch() to capture the oldValue in its callback and store it somewhere
• Use an inline template to print the oldValue

(3/12) What is the recommended way to handle form validation across multiple components in a Vue 3 application?

---

• Use watchers in every component
• Use provide/inject for ephemeral state
• Validation is only possible in computed properties
• Use third-party libraries like VeeValidate or custom composables

(4/12) What is the recommended approach if a Vue 3 application must handle complex offline data synchronization and advanced state logic?

---

• Use watchers in each component for syncing data
• Rely on transitions to manage offline states
• Implement an external robust state management library, like Pinia or Vuex, along with offline sync logic
• Manipulate localStorage in every component’s setup()

(5/12) Which lifecycle hook might you choose to run code right before the user navigates away from the current route in Vue 3 using the Options API?

---

• Use defineProps for concurrency watchers
• onMounted only
• Use watchers for concurrency watchers in main.js
• beforeRouteLeave in the component’s export default, or define a composition-based guard if using Composition API + vue-router plugin

(6/12) Which approach do you use to define a local directive in a Vue 3 Options API SFC so it can be used only in that component’s template?

---

• Use watchers for each directive
• Use defineProps for directives
• Local directives do not exist in Vue 3
• directives: { myDirective: { mounted(el, binding) {...} } } in export default

(7/12) Which Vue 3 Composition API function allows you to programmatically access the current route object provided by Vue Router?

---

• getCurrentRoute() from 'vue'
• onRoute()
• useRoute()
• this.$route in Composition API

(8/12) When dealing with route transitions for multiple named views in Vue 3, how might you animate them separately?

---

• Wrap each named router-view in its own <transition> or <transition> tags to manage separate transitions
• Use watchers for each named view
• Use defineEmits for each route transition
• Impossible to transition multiple named views

(9/12) In Vue 3, how do you define a local component directive if you’re using <script setup> for your Single File Component?

---

• You cannot define local directives in <script setup>
• app.directive is your only option for directives
• Use watchers to replicate directive logic
• You can define a const myDirective = { mounted() {...} }, then apply it in the template as v-my-directive

(10/12) How do watchers in a child component handle concurrency if the parent's data changes multiple times in quick succession in Vue 3?

---

• Use defineProps for concurrency watchers
• No approach to handle concurrency from parent changes
• If the child watchers reference that prop, they trigger for each change. The child can define onInvalidate to cancel previous tasks if needed
• Use watchers in main.js for concurrency watchers only

(11/12) Which approach might you consider if a large object or array doesn’t require reactivity for most of its nested fields in Vue 3, preventing overhead?

---

• Use defineProps for concurrency watchers
• No approach for skipping reactivity in Vue 3
• Use shallowReactive or markRaw if you don’t need reactivity at all for nested fields, or only track top-level changes
• Use watchers in main.js for concurrency watchers

(12/12) What is an appropriate approach for persisting user preferences across sessions in a Vue 3 app?

---

• Rely on watchers to reload data each time
• Use a custom directive to track user preferences
• Use localStorage or sessionStorage, possibly combined with watchers or Pinia/Vuex for synchronization
• Store data in a reactive variable that resets on page reload

Submit