With Vue 2's end of support approaching, the goal was a migration to Vue 3. Compatibility mode worked fine — until it was switched off, and everything broke.
The root cause: this was a backend-driven UI application. The backend described what to render, which actions to show, which endpoints to call. Components passed mutable objects between each other that modified their own state directly — a pattern fundamentally incompatible with Vue 3's reactivity system.
Rather than migrating dozens of specialized components one by one, the key architectural decision was to build a single configurable component capable of rendering many page types, pushing more of the logic deeper into the backend.
To de-risk the rollout, an environment switch in the deployment pipeline allowed migrating section by section, with an immediate rollback available at any point.
Result: roughly 50% less frontend code, fewer specialized components, a cleaner contract with the backend, and a migration completed in under three months with zero delivery downtime.
Content constraint: no code, real data or UI from SpecCheck/Caterpillar is shown here — only a general, hand-drawn diagram of the backend-driven UI architecture (with no company-specific data).