HeadlinesBriefing favicon HeadlinesBriefing.com

Vue Anti‑Pattern: Computed Property Hack Turns Into Technical Debt

DEV Community •
×

A Vue developer, pressed for time, slipped a computed property into a component to run verification logic. The property, meant for pure calculations, carried side effects like analytics tracking and UI navigation. The code silently executed only when the template accessed it, turning a clean pattern into a hidden hack that later earned the nickname dummy.

Because computed properties are lazy, the logic never ran until a template reference appeared, masking bugs until production. Reviewers saw passing tests and no runtime errors, so the anti‑pattern slipped through. Over time, the pattern grew, accumulating technical debt and eroding code quality, a classic example of how small, locally‑reasonable choices can spiral.

To stop the cycle, teams should enforce lint rules that flag side effects in computed properties, add a review checklist that flags dummy props, and refactor problematic code into watchers. Onboarding should stress the difference between pure calculations and side‑effectful logic, ensuring new developers understand Vue’s reactivity model before they touch the codebase.