🐛 BUG: Loss of reactivity in Vue component (production only)

[evanaustin]

What version of astro are you using?

0.22.20

What package manager are you using?

yarn on my machine / npm in StackBlitz

What operating system are you using?

Mac

Describe the Bug

Hey team, I seem to be running into an issue with reactivity after a component has been rendered in production/built mode.

These are Vue components, and I'm hydrating them with client:only (though it didn't seem to work regardless of how I try to hydrate it).

In essence, I have a standalone class instance that holds a given user's authenticated state; this instance is initially populated via an API response after the client loads. Elsewhere, other components expect to be able to use the populated data from the same instance. As you would imagine, the proxy/value being requested would initially be null ... until the API response comes back and the proxy is updated.

In dev, it works as intended: when the proxy updates, the view is updated as well. In production, however, the view does not update after the proxy updates. With a console.log(), though, you'll see that the proxy itself does ultimately update.

See the attached StackBlitz with some stripped down code to help illustrate the issue.

Thanks in advance!

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-jhuzfh-qhxzzn?devtoolsheight=33&file=src/layouts/BaseLayout.astro

[matthewp]

I'm able to recreate, here's a newer stackblitz still showing the problem. https://stackblitz.com/edit/github-jhuzfh-qz3ye9?devtoolsheight=33&file=package.json,src%2Fcomponents%2FClient.vue,astro.config.mjs

This seems to be Vue-specific and likely related how we set up the island.

[tony-sull]

May be related to the store being out of sync? #2658

[natemoo-re]

I am pretty confident this is fixed by #3455 as I was able to get the reproduction working locally. Please feel free to re-open this if you're still having trouble once that fix goes out in the next release, though!