(1/12) How do you define watchers if you want typed usage for concurrency with a numeric ref in Vue 3 <script setup lang="ts">?

---

• Use defineProps for concurrency watchers
• import { watch } from 'vue'; const count = ref<number>(0); watch(count, (newVal, oldVal, onInvalidate) => { ... concurrency logic ... })
• Use watchers in main.js for concurrency watchers only
• Impossible to type watchers in script setup

(2/12) In Vue 3, which method is used to remove a previously added route in Vue Router at runtime?

---

• router.deleteRoute()
• router.removeRoute()
• It is not possible to remove routes dynamically
• router.popRoute()

(3/12) How do you track a route param that might be an optional numeric ID but is sometimes undefined, ensuring typed usage in Vue 3 + TS?

---

• Within your code, you can define a param type as number | undefined, or parse it if it’s a string route param. Possibly do parseInt() in a watch or computed to handle typed usage
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• You can't type route params in Vue 3

(4/12) What is the difference between 'template refs' in Vue 3 and the ref() function from the Composition API?

---

• They are the same concept, just different usage
• Template refs are used for accessing DOM elements, while ref() is used for reactive data in JavaScript
• Template refs do not exist in Vue 3
• ref() can only store boolean values, while template refs store strings

(5/12) Which best describes how you could add a watch that responds only to changes in route.query.search but not other query params?

---

• Use watch(() => route.query.search, (newVal, oldVal) => { ... })
• Vue 3 does not allow partial watchers on query
• Use watchers for each parameter globally in main.js
• You must watch the entire route.query and manually compare search

(6/12) In Vue 3, if you want to define a component that should not be tracked by Vue’s reactivity system at all, which approach might you use?

---

• All components must be reactive in Vue 3
• Mark the entire component with v-once
• Write a pure functional component or forcibly exclude data from reactivity using markRaw
• Use shallowReactive on the entire component

(7/12) What is the typical method to handle asynchronous errors in a Vue 3 app if a promise rejects in a child component?

---

• Async errors cannot be caught in Vue 3
• Use a global variable to store error state
• Use onErrorCaptured in an ancestor component or a global error handler
• Automatically triggers a route guard

(8/12) Which advanced approach might you use if you need to run an async operation both on the server (onServerPrefetch) and the client (onMounted) in Vue 3, but unify concurrency watchers so the operation does not re-run if SSR data is fresh?

---

• Impossible to unify SSR and client concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Store a version or timestamp in a shared store. If SSR already fetched it, watchers or onMounted checks that version. If it's up to date, skip the new fetch or onInvalidate. This ensures concurrency logic merges SSR + client
• Use defineProps for concurrency watchers

(9/12) In Vue 3, how can you directly set the 'value' of a DOM element with a ref in the script setup?

---

• Use watchEffect to update DOM elements automatically
• myRef.value = 'new value' if myRef is a DOM element ref, using the .value property to get the element then .value again for input
• This is not possible in Vue 3
• myRef = 'new value' because .value is read-only

(10/12) Which approach to testing Vue 3 components is recommended?

---

• Use watchers for test cases inside each component
• Manual testing in the browser is the only recommended way
• Use libraries like @vue/test-utils and a test runner like Jest or Vitest
• Use only end-to-end tests, ignoring unit tests

(11/12) When using watch(() => route.params, callback), how can you ensure that the callback runs only when route.params.userId changes but not on route.params.tab?

---

• You cannot differentiate which param changed; watch sees them all
• Use shallowRef for the route object
• Use onUnmounted to detect param changes
• Use watch(() => route.params.userId, callback) to watch a specific param

(12/12) Which approach is correct if you need to store authentication tokens in a Vue 3 SPA, while mitigating XSS or CSRF concerns?

---

• Use secure, httpOnly cookies for tokens if possible, or at least store them in a well-protected approach (like httpOnly + server checks). If storing in localStorage, handle XSS carefully.
• Always store tokens in localStorage with no further checks
• Pinia encrypts tokens by default
• Vue 3 handles all token security automatically

Submit