After reading the XState documentation I followed the Reddit sample found at the official guide, here: https://xstate.js.org/docs/tutorials/reddit.html
I was trying to upgrade to Vue 3 the sample implementation by Chris Hannaby but I couldn't.
When I run the app, after choosing an item from the list the component gets stuck "Loading", even if, inspecting the state of the subreddit interpreter in Vue Dev Tools, it is correctly set to the 'loaded' value.
Curiously enough if you choose another item in the list and then go back to the previous one, it works and loads the list normally.
This is the codesandbox by Chris, in Vue 2, working:
https://codesandbox.io/s/xstate-vue-reddit-example-with-actors-uvu14
And this is the fork by me, in Vue 3, :(
https://codesandbox.io/s/xstate-vue-reddit-example-with-actors-forked-1pm0mp
I'm quite new to both Vue and XState, any help will be greatly appreciated.
Using the suggestion at this bug, which appeared very similar to mine:
https://github.com/statelyai/xstate/issues/3169
I modified the implementation inserting the call to toRef, here
const { state, send } = useActor(toRef(props, "service"))
Now it works:
https://codesandbox.io/s/xstate-vue-3-reddit-example-with-actors-working-g9ywb2
I still have doubts why. Any explanation will be greatly appreciated.