64 Vue.js interview questions with answers

All Vue.js interview questions

• What is Vue.js? How does it differ from React/Angular?

• Options API vs Composition API — what is the difference?

• What is `<script setup>`? Benefits over regular `setup()`?

• What is a Single File Component (SFC)?

• Common Vue directives: v-if, v-show, v-for, v-model, v-bind, v-on?

• v-if vs v-show — when to use which?

• Why is `:key` in `v-for` important?

• How does v-model work? Custom v-model?

• How does the reactivity system work in Vue 3?

• `ref` vs `reactive` — what's the difference? When to use each?

• `computed` vs `watch` vs `watchEffect` — when to use each?

• What is a Composable? Compare with Mixins.

• Lifecycle hooks in Composition API?

• What are `provide` / `inject`? When to use?

• `defineProps` and `defineEmits` in `<script setup>`?

• Ways to communicate between components in Vue?

• What are slots? Named slots and scoped slots?

• What is `defineExpose` in `<script setup>`?

• Vue Router basics: setup and navigation?

• What are navigation guards? beforeEach, beforeEnter, beforeRouteEnter?

• Dynamic routes and lazy loading routes?

• What is Pinia? Why replace Vuex?

• How to create and use a Pinia store?

• What is `storeToRefs`? Why is it needed?

• How to persist Pinia store with localStorage?

• What is the `v-memo` directive?

• What is the KeepAlive component?

• What is the Teleport component? Use cases?

• What is the Suspense component?

• Lazy loading components in Vue?

• Custom directives in Vue 3?

• Vue 3 vs Vue 2 — biggest changes?

• SSR with Nuxt.js — how does Vue SSR work?

• Error handling in Vue: errorCaptured and onErrorCaptured?

• Render functions and h() in Vue 3?

• Testing Vue components with Vitest and Vue Test Utils?

• What is `nextTick`? When to use it?

• Transition and TransitionGroup in Vue?

• Vue 3 performance optimization best practices?

• `toRef`, `toRefs`, `toValue` — when to use?

• Accessibility (a11y) in Vue — best practices?

• Template refs — how to access DOM elements and child components in Vue 3?

• How to properly fetch async data in Vue 3 Composition API?

• Hydration mismatch in Nuxt/Vue SSR — causes and fixes?

• Nuxt 3 data fetching — useFetch vs useAsyncData vs $fetch?

• `shallowRef`, `shallowReactive`, `markRaw` — when to use for optimization?

• How does ref unwrapping work in templates and reactive objects?

• Pinia plugins — how to create custom plugins and use cases?

• Route meta and type-safe route meta in Vue Router 4?

• Scroll behavior in Vue Router — restoring scroll position?

• `watchEffect` deep dive — cleanup, flush timing and stopping watchers?

• Typed `provide` / `inject` with InjectionKey — best practice?

• `v-once` and `v-pre` — when to use them to skip rendering?

• Virtual scrolling in Vue — efficiently handling large lists?

• v-model modifiers — built-in and custom modifiers?

• Nuxt 3 middleware — route middleware vs server middleware?

• Why should you avoid putting `v-if` and `v-for` on the same element? How do you rewrite it?

• Why does assigning to a `prop` trigger a warning? How should a child modify data passed from the parent?

• Why does destructuring a `reactive` object (or `props`) lose reactivity? How do you keep it?

• Watching an object: when do you need `deep`, why is `oldValue` equal to `newValue`, and what does `flush` change?

• How does `defineModel` differ from manually writing `props` + `emit('update:modelValue')` for component `v-model`?

• How does a Pinia setup store (composition-style) differ from an option store? Any limitations?

• Why must composables be called synchronously in `setup`? What breaks after an `await`?

• A 20,000-row table renders slowly and eats memory: how do `shallowRef` / `markRaw` help? When do you need `triggerRef`?