Session Replay on a component level (Open Replay / Vue Devtools)

[plc-dev]

Hello,

I have the following scenario:
I have a Vue 3 application that renders arbitrary components in a sort of Canvas.
Which components are displayed on that Canvas is governed by a separate configuration file (JSON).
This configuration file is read at runtime (into a Pinia store) to display the components on the Canvas, that have been specified in the configuration.
The interaction of the user and the changes on the components is logged in Pinia.
Later, I can "replay" the logged interactions and changes of the components in the same Canvas + some "replay-overlay".

To achieve this, I currently handle the entire state of the components in Pinia, by storing the entire configuration file in a store and perform mutations on that stored configuration - which in turn dynamically renders the components on the Canvas.
E. g. User interacts with an input field in a dynamically rendered component, this change is stored in Pinia, and the component queries the store for new changes. The component is required to query the changes, so that I can later on "replay" the same change, as if the user had given the input.

A major gripe is that every component has to subscribe to the entire state in Pinia to be able to track the changes (if I didn't miss the better way to do this).
Is there a way to simplify this and maybe omit the need of a state management solution?
Does Vue provide low level APIs that one can use? Can I misuse tools like Open Replay or Vue Devtools for this purpose?

What I would like is essentially track everything the user did in that Canvas (including the dynamically rendered components) and be able to replay it later in the same Canvas + added functionality (like stop, resume, annotate the replay and perform further interactions from a certain state in that replay).

Thanks a lot for any ideas or recommendations in advance.