Vue.js Interview Questions and Answers

Basic Vue.js Interview Questions

1. What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPA).

Main features:

Reactive data binding
Component-based architecture
Virtual DOM
Easy integration
Lightweight and fast

2. Difference between Vue 2 and Vue 3?

Key differences:

Better performance in Vue 3
Composition API
Smaller bundle size
Improved TypeScript support
Multiple root nodes supported
Proxy-based reactivity

3. What is Virtual DOM?

Virtual DOM is a lightweight JavaScript representation of the real DOM. Vue updates only changed parts instead of re-rendering the entire page.

4. What is reactive data in Vue?

Reactive data automatically updates the UI when data changes.

Example:

data() {
  return {
    count: 0
  }
}

5. What is two-way data binding?

Vue synchronizes input and data automatically using v-model.

Example:

<input v-model="name" />

6. Explain directives in Vue.

Directives are special attributes with v-.

Common directives:

v-if
v-show
v-for
v-model
v-bind
v-on

7. Difference between `v-if` and `v-show`?

v-if → Adds/removes element from DOM
v-show → Uses CSS display: none

Use:

v-if for rare toggles
v-show for frequent toggles

8. What is a component in Vue?

A component is a reusable UI block.

Example:

export default {
  name: 'UserCard'
}

9. Difference between props and emits?

Props → Parent → Child data
Emits → Child → Parent events

10. What is computed property?

Computed properties cache calculated values.

Example:

computed: {
  fullName() {
    return this.first + ' ' + this.last
  }
}

11. Difference between computed and methods?

Computed → cached
Methods → execute every render

12. What is watch in Vue?

Watch observes data changes.

Example:

watch: {
  count(newVal) {
    console.log(newVal)
  }
}

13. What is lifecycle hook?

Lifecycle hooks allow execution at different component stages.

Common hooks:

created
mounted
updated
unmounted

Vue 3:

onMounted
onUnmounted

14. Difference between `created()` and `mounted()`?

created() → component initialized
mounted() → DOM rendered

15. What is `key` in Vue?

key helps Vue track elements efficiently in lists.

Example:

<div v-for="user in users" :key="user.id">

Intermediate Vue.js Questions

16. What is Composition API?

A new Vue 3 API for organizing logic.

Example:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    return { count }
  }
}

17. Difference between Options API and Composition API?

Options API → organized by option type
Composition API → organized by feature/logic

Composition API is better for large projects.

18. What is `ref()`?

Creates reactive primitive values.

Example:

const count = ref(0)

19. What is `reactive()`?

Creates reactive objects.

Example:

const user = reactive({
  name: 'John'
})

20. Difference between `ref` and `reactive`?

ref → primitives or single values
reactive → objects/arrays

21. What is Vue Router?

Official routing library for Vue.js.

Features:

SPA routing
Dynamic routes
Navigation guards
Lazy loading

Used to control route access.

Example:

router.beforeEach((to, from, next) => {
  next()
})

23. What is Pinia?

Modern state management library for Vue.

Replacement for Vuex.

24. Difference between Vuex and Pinia?

Pinia is simpler
Better TypeScript support
No mutations required
Smaller boilerplate

25. What is state management?

Centralized shared data handling between components.

26. What is slot in Vue?

Slots allow passing template content into components.

Example:

<MyCard>
  <h1>Hello</h1>
</MyCard>

27. What are named slots?

Multiple slots with names.

Example:

<slot name="header"></slot>

28. What is dynamic component?

Render components dynamically.

Example:

<component :is="currentComponent" />

29. What is lazy loading in Vue?

Loading routes/components only when needed.

Example:

const Home = () => import('./Home.vue')

30. What is provide/inject?

Dependency sharing between deep components.

Advanced Vue.js Questions

31. Explain Vue reactivity system.

Vue uses Proxy (Vue 3) to track dependencies and update DOM automatically when data changes.

32. What is `nextTick()`?

Waits for DOM updates after state changes.

Example:

await nextTick()

33. What is Suspense in Vue 3?

Handles async components with loading fallback.

34. What are composables?

Reusable Composition API logic functions.

Example:

export function useCounter() {
  const count = ref(0)

  return { count }
}

35. What is Teleport?

Renders component content outside normal DOM hierarchy.

36. What is KeepAlive?

Caches inactive components.

Example:

<KeepAlive>
  <component :is="view" />
</KeepAlive>

37. Explain SSR in Vue.

Server-Side Rendering improves SEO and initial loading speed.

Framework:

Nuxt.js

38. What is hydration?

Connecting client-side Vue app to server-rendered HTML.

39. What are mixins?

Reusable logic blocks (mostly replaced by composables in Vue 3).

40. What is difference between SPA and SSR?

SPA → rendered in browser
SSR → rendered on server first

Vue Performance Questions

41. How to optimize Vue app performance?

Lazy loading
Code splitting
KeepAlive
Debounce watchers
Virtual scrolling
Avoid unnecessary re-renders

42. What causes unnecessary re-renders?

Incorrect reactive usage
Changing object references
Missing key

43. How does Vue track dependencies?

Through getters/setters (Vue 2) and Proxy (Vue 3).

44. What is memoization in Vue?

Caching expensive calculations using computed properties.

Vue + API Questions

45. How do you call APIs in Vue?

Using:

Fetch API
Axios

Example:

const res = await axios.get('/api/users')

46. Where do you usually call APIs?

Usually inside:

onMounted()

47. How do you handle loading state?

const loading = ref(false)

48. How do you handle API errors?

Using try/catch.

Example:

try {
  await apiCall()
} catch (e) {
  console.error(e)
}

Vue Practical Interview Questions

49. How do you communicate between sibling components?

Methods:

Pinia/Vuex
Event bus
Parent mediation

50. How do you structure large Vue projects?

Example:

src/
 ├── components/
 ├── pages/
 ├── router/
 ├── stores/
 ├── composables/
 ├── services/
 ├── layouts/
 └── utils/

Senior-Level Vue Questions

51. Explain composables vs mixins.

Mixins can create naming conflicts
Composables are cleaner and reusable

52. How do you secure Vue applications?

Route guards
JWT handling
XSS prevention
Avoid storing sensitive data in localStorage

53. Explain JWT authentication flow in Vue.

User logs in
Backend returns token
Store token
Send token in Authorization header

54. What is code splitting?

Splitting JS bundles into smaller chunks.

55. Explain hydration mismatch.

Occurs when server-rendered HTML differs from client-rendered HTML.

Common Coding Questions

Create reusable composable

import { ref } from 'vue'

export function useToggle() {
  const open = ref(false)

  const toggle = () => {
    open.value = !open.value
  }

  return { open, toggle }
}

Debounced search input

watch(search, debounce(fetchUsers, 500))

Dynamic class binding

<div :class="{ active: isActive }"></div>

Conditional rendering

<div v-if="loading">Loading...</div>

Real Interview Questions for Fullstack Roles

56. How do you connect Vue with Laravel backend?

REST API
Sanctum authentication
Axios/fetch
JWT or session auth

57. Which is better for large projects: Pinia or local state?

Local state → small isolated logic
Pinia → shared global state

58. Explain your preferred architecture for Vue apps.

Good answer:

Feature-based structure
Reusable composables
API service layer
Pinia stores
Route-level lazy loading

59. How do you handle forms in Vue?

v-model
Validation libraries
Controlled state

Libraries:

VeeValidate
Yup

60. What Vue ecosystem tools have you used?

Examples:

Vue Router
Pinia
Nuxt.js
Vite
Axios

Next step for fullstack interviews usually becomes:

Vue.js
Laravel API
Authentication
Database design
Fullstack architecture
Deployment/devops
Practical coding