← All topics

Vue Middle interview questions and answers

75 questions for a Vue (Middle) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.Why doesn't this watcher fire?
  2. 2.How does watchEffect differ from watch?
  3. 3.How do you cancel a stale request when a watched id changes quickly (Vue 3.5+)?
  4. 4.What does { deep: true } do on a watcher?
  5. 5.When is shallowRef a better choice than ref?
  6. 6.What does toRefs do?
  7. 7.What is a writable computed?
  8. 8.Why is mutating state inside a computed getter a bug?
  9. 9.How do you make a watch callback also run right away with the current value?
  10. 10.When does a watcher with flush: 'post' run?
  11. 11.What do defineModel modifiers let you do?
  12. 12.How do you apply fallthrough attributes to an inner element instead of the root?
  13. 13.What is a scoped slot?
  14. 14.How do you keep provided state reactive but prevent descendants from mutating it?
  15. 15.Why use an InjectionKey symbol instead of a string for provide/inject?
  16. 16.What does defineAsyncComponent do?
  17. 17.What does defineExpose do in <script setup>?
  18. 18.What does the 3.5 reactive props destructure allow?
  19. 19.How do you type component events with TypeScript?
  20. 20.What is a composable?
  21. 21.What problems of mixins do composables solve?
  22. 22.How should a composable accept arguments that might be refs, getters or plain values?
  23. 23.Why must composables be called synchronously in <script setup> rather than in a callback?
  24. 24.What happens when <script setup> contains a top-level await?
  25. 25.How do you write a local custom directive in <script setup>?
  26. 26.What is a Vue plugin?
  27. 27.What does <KeepAlive> do?
  28. 28.Why render a modal with <Teleport to="body">?
  29. 29.How does <Transition name="fade"> animate an element?
  30. 30.What problem does nextTick solve here?
  31. 31.How do you lazy-load a route component?
  32. 32.How do you protect routes that require authentication?
  33. 33.Why doesn't the page update when navigating from /users/1 to /users/2?
  34. 34.What does props: true in a route definition do?
  35. 35.Why does reloading /about return 404 in production with createWebHistory?
  36. 36.What is the difference between router.push and router.replace?
  37. 37.How are nested routes rendered?
  38. 38.Why does destructuring a Pinia store lose reactivity, and how is it fixed?
  39. 39.What is the difference between setup stores and option stores in Pinia?
  40. 40.What does store.$patch offer?
  41. 41.Can Pinia actions be asynchronous?
  42. 42.How do you use a store outside of a component, e.g. in a router guard?
  43. 43.Why isn't this Pinia getter cached?
  44. 44.How can one Pinia store use another?
  45. 45.How do you style an element inside a child component from a scoped style?
  46. 46.What does v-bind() inside <style> do?
  47. 47.How do you catch errors from descendant components?
  48. 48.Why await user interactions in Vue Test Utils?
  49. 49.How do you test a component that uses Pinia stores?
  50. 50.Which tool type-checks .vue files, including templates, in CI?
  51. 51.How do you animate items being added, removed and reordered in a list?
  52. 52.Why prefer local imports over global app.component() registration?
  53. 53.How do you set component options like inheritAttrs: false in <script setup>?
  54. 54.How do you watch several sources with one callback?
  55. 55.What does { once: true } do on a watcher (Vue 3.4+)?
  56. 56.How do you stop a watcher before the component unmounts?
  57. 57.How can you create a ref that debounces updates?
  58. 58.You mutate an array inside a shallowRef. Why doesn't the view update, and how do you fix it?
  59. 59.What does <Suspense> do with a component that has a top-level await in <script setup>?
  60. 60.How do you warn the user before leaving a route with unsaved changes?
  61. 61.What are the two common ways to load data for a route?
  62. 62.How do you keep filters in the URL query and react to their changes?
  63. 63.What are named views in Vue Router?
  64. 64.How does a route alias differ from a redirect?
  65. 65.How do you know whether router.push() actually navigated?
  66. 66.Does a setup store have $reset() like an option store?
  67. 67.How do you log every action of a Pinia store and its errors?
  68. 68.What does VueUse provide?
  69. 69.What do CSS Modules in an SFC look like?
  70. 70.How do you style slot content passed in by the parent from a component's scoped styles?
  71. 71.When is shallowMount useful in Vue Test Utils?
  72. 72.In a component test, why await flushPromises() after clicking a button that triggers an API call?
  73. 73.What should happen to focus after client-side navigation in an SPA for accessibility?
  74. 74.How do you run a Vite build with settings from .env.staging?
  75. 75.Why should production builds use Vue's production mode?