Updating property of store state overwrites proxy object in SSR

[lwansbrough]

Reproduction

N/A

Steps to reproduce the bug

import serialize from 'serialize-javascript'

export const useSiteStore = defineStore('site', {
  state: () => ({
    domain: null
  }),
  actions: {
    async setSite(domain) {
      console.log(serialize(this.domain)) // { "value": null }
      this.domain = domain
      console.log(serialize(this.slug)) // "example.com"
    }
  }
})

Expected behavior

I expected the value property of the object to be updated when assigning to this.domain, instead the entire property is overwritten as though the proxy setter is ignored.

I believe this expectation is consistent with the described behaviour here: https://pinia.vuejs.org/core-concepts/state.html#mutating-the-state

Actual behavior

The state property is overwritten, resulting in [Vue warn]: toRefs() expects a reactive object but received a plain one.

In the browser, null and "example.com" are logged. I believe this is the correct behaviour.

Additional information

Using Vue 2.7, rendering via SSR on Node.js 16. The problem doesn't seem to happen in Chrome/Firefox, only in Node.js during SSR.

[posva]

I'm not following what you are trying to do. If you have a boiled down reproduction, this is more likely to get looked at.
Note this could also be a bug in Vue 2.7

[lwansbrough]

In the simplest terms I'm just trying to update the state. It works as expected in the browser, but in Node.js the property of the state that I'm updating loses its reactivity entirely and is just a plain old JS value after re-assignment. This signals to me that whatever is in charge of updating that state reactively is breaking in Node.js.

I'm leaning towards it being a bug either with Vue 2.7 or the way Pinia interacts with Vue 2.7 in Node.js.

[posva]

it reminds me of this: vuejs/composition-api#721
Maybe this helps you find more information