The 'External Store' Pattern: Integrating Vue with Non-Reactive State (XState/Redux)

The External Store pattern uses a custom 'bridge' to sync non-reactive state into Vue's reactivity system.

Sometimes logic is handled outside Vue (e.g., a complex State Machine in XState). To make Vue react to it, you create a ref or shallowRef and update it whenever the external store emits a change. This allows you to keep business logic pure and framework-agnostic while still getting the benefits of Vue's UI updates.