Top 10 Mistakes in Vue.js and How to Fix Them

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Vue.js is one of the most popular front-end JavaScript frameworks, offering a reactive data-binding system and component-based architecture. However, developers—especially beginners—often make mistakes that can lead to performance issues, difficult debugging, and security risks.

In this article, we’ll explore the top 10 mistakes in Vue.js and how to fix them with best practices and code examples.

1️⃣ Not Using `key` in v-for Loops

❌ Mistake: Not Assigning a Unique Key in `v-for`

<li v-for="item in items">{{ item.name }}</li>

✔ Issue:

Vue re-renders the entire list when data changes, reducing performance.

✅ Solution: Use a Unique `key` in `v-for` Loops

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

✔ Benefit: Optimizes list rendering by ensuring Vue tracks each item correctly.

2️⃣ Modifying Props Directly Inside Child Components

❌ Mistake: Changing Props in a Child Component

<script setup>
defineProps(['message']);
message = "New message"; // ❌ Mutating prop directly
</script>

✔ Issue:

Props should be read-only, and modifying them breaks Vue’s reactivity system.

✅ Solution: Use `computed` Properties or Emit Events

<script setup>
defineProps(['message']);
const updatedMessage = computed(() => message + " Updated!");
</script>

✔ Benefit: Preserves reactivity and ensures proper data flow.

3️⃣ Using `v-if` and `v-for` Together

❌ Mistake: Using `v-if` and `v-for` in the Same Element

<li v-for="item in items" v-if="item.show">{{ item.name }}</li>

✔ Issue:

Vue evaluates v-for first, iterating over all elements before filtering, reducing efficiency.

✅ Solution: Use `computed` to Filter the List Before Rendering

<template>
  <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</template>

<script setup>
const filteredItems = computed(() => items.filter(item => item.show));
</script>

✔ Benefit: Improves performance by filtering items before rendering.

4️⃣ Not Cleaning Up Event Listeners

❌ Mistake: Adding Event Listeners Without Removing Them

mounted() {
  window.addEventListener("scroll", this.handleScroll);
}

✔ Issue:

Memory leaks occur if listeners are not removed when the component is destroyed.

✅ Solution: Remove Event Listeners in `onUnmounted`

onMounted(() => window.addEventListener("scroll", handleScroll));
onUnmounted(() => window.removeEventListener("scroll", handleScroll));

✔ Benefit: Prevents memory leaks and ensures better performance.

5️⃣ Directly Modifying `ref` Objects Instead of `value`

❌ Mistake: Changing `ref` Object Instead of `value`

const counter = ref(0);
counter = 5; // ❌ Reassigning a ref object

✔ Issue:

Vue does not detect changes if you reassign the entire ref object.

✅ Solution: Modify the `.value` Property

const counter = ref(0);
counter.value = 5; // ✅ Updates correctly

✔ Benefit: Ensures reactivity is preserved.

6️⃣ Not Using Vue DevTools for Debugging

❌ Mistake: Debugging Without Vue DevTools

console.log(data); // ❌ Not efficient for debugging

✔ Issue:

Harder to inspect reactivity issues and Vuex state changes.

✅ Solution: Use Vue DevTools

Install Vue DevTools from here.
Inspect components, Vuex state, and events in real-time.

✔ Benefit: Easier debugging and performance monitoring.

7️⃣ Using Global Variables Instead of Vuex/Pinia

❌ Mistake: Storing Global Data in `window` or Local Storage

window.globalUser = { name: "John" }; // ❌ Not reactive

✔ Issue:

No reactivity, and changes do not update the UI.

✅ Solution: Use Vuex or Pinia for State Management

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({ name: "John" }),
});

✔ Benefit: Maintains reactive, centralized state management.

8️⃣ Not Lazy Loading Routes

❌ Mistake: Loading All Routes Eagerly

import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

✔ Issue:

Increases initial bundle size, slowing down page loads.

✅ Solution: Use Lazy Loading with `defineAsyncComponent`

const Home = defineAsyncComponent(() => import('./views/Home.vue'));
const About = defineAsyncComponent(() => import('./views/About.vue'));

✔ Benefit: Reduces initial load time and improves performance.

9️⃣ Using `watch` Instead of `computed` for Derived State

❌ Mistake: Using `watch` to Compute Derived Data

const fullName = ref("");

watch(() => firstName.value + " " + lastName.value, (newVal) => {
  fullName.value = newVal;
});

✔ Issue:

watch is meant for side effects, not computing new values.

✅ Solution: Use `computed` Instead

const fullName = computed(() => firstName.value + " " + lastName.value);

✔ Benefit: More efficient and automatically updates.

🔟 Not Securing API Requests

❌ Mistake: Sending API Requests Without Authorization

axios.get('/api/users'); // ❌ No authentication token

✔ Issue:

Exposes sensitive data to unauthorized users.

✅ Solution: Attach Authorization Headers

axios.get('/api/users', {
  headers: { Authorization: `Bearer ${token}` }
});

✔ Benefit: Ensures secure communication with APIs.

🎯 Conclusion

Vue.js is a powerful framework, but avoiding these common mistakes can help you build high-performance, secure, and maintainable applications.

✔ Use key in v-for loops for better rendering
✔ Avoid modifying props directly—use computed properties instead
✔ Unsubscribe from event listeners to prevent memory leaks
✔ Use Vuex/Pinia for state management
✔ Lazy load routes to optimize performance
✔ Secure API requests properly

By following these best practices, you’ll write better, more efficient Vue.js applications! 🚀

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide