How can I set the data of Alpine component from outside of ANY Alpine component?

[classicalguss]

I have a user modal that shows the data of any user dynamically. Here is an example to simplify the requirement

<div x-data="{ user: {} }">
    <p>Hello <span x-text="user.name"></span></p>
</div>

How can I set the user property here? Please note that when setting the property I need to set it outside of any Alpine component scope. So in other words the function call cannot happen in any alpine component whether the one that I am intending to change the data for or any other component.

Alpine documentation is full of examples of changing the data within the component itself, which I don't find useful in this case.

[ekwoka]

How can I set the user property here?

generally, you don't it defeats the idea of components.

Please note that when setting the property I need to set it outside of any Alpine component scope

Are you sure? This seems doubtful.

It's likely an XY problem.

but to most directly answer the question...

The most common is that you would just use a store, since Stores are easily addressable from outside the alpine context. It's globally shared, so you update it there.

To update the data in an arbitrary component context, when all you have is the Element, you can pass it to Alpine.$data to get a reactive proxy of it's datastack. This is a more "internal" kind of way if you REALLY need it (probably don't)

[classicalguss]

Thank you for your reply.

I don't know if using AlpineJS components is the right approach but what I needed from AlpineJS in this specific use-case is the templating aspect.

The reason why I need it to work from outside of Alpine is because I'm connected to a Unity WebGL Instance, and when I click a walking character from Unity it dispatches an event to javascript. The event should show the dynamic user profile.

I just tried Stores and it seems to work. But I'm struggling a bit to understand if what I'm actually doing the right approach in all of this and if there is actually an alternative to AlpineJS components. So far in this case, I am taking advantage of the templating aspect of the component, and not the reactivity of the variables within the component itself (which I think is the purpose of components).

[ekwoka]

AlpineJS is about Reactive Data Binding, for sure.

Seems like Alpine could have a listener for the event that is dispatched and handle it there, no? Then you don't need to access Alpine from outside Alpine.