As modern Vue.js applications grow in complexity, managing the relationship between components and Vuex (an official Vue.js state management library) modules often requires cumbersome manual coordination. To address this challenge, we present Vexa (Vue.js External Expression Architect), a framework that introduces a configuration-driven development (CDD) approach to state management. Vexa enables automatic and on-demand loading of Vuex modules while providing transparent access to external data whose state is managed by those modules. Thus, it reduces manual development overhead through declarative design. By representing application dependencies using structured YAML configurations, Vexa performs dual-target code generation to produce both Vue components and Vuex modules. This not only improves maintainability, but also ensures consistency between UI components and state logic. A case study in demonstration-scale Vue.js applications shows that Vexa significantly improves overall development efficiency, without sacrificing flexibility.