$watch doesn't return the old value

[Babelfisch]

I tried this simple code of the $watch documentation for deep watching:

<div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo', (value, oldValue) => console.log(value, oldValue))">
    <button @click="foo.bar = 'bob'">Update</button>
</div>

The expected output is:

{bar: "bob"}
{bar: "baz"}

But the real output is:

{bar: "bob"}
{bar: "bob"}

Tested with Safari and Chrome and AlpineJS 3.12.0 and 3.11.1

BTW: Why it's not possible to open a issue?

[ekwoka]

Alpine has issues closed. Only discussions.

Technically, your code is working, and it is returning the old value.

The old value is also the same object as the new value.

[SimoTod]

I believe there's an "on hold" PR to fix it that CaleB will review after livewire v3 is released

[anjanesh]

Why is the old value the same as the new value ?
I would like it to return the old value as { foo: { bar: 'baz' }}

[ekwoka]

Because the old value and the new value are the same thing.

const objA = {
  Foo: 'bar'
}

const objB = objA

objA.Foo = 'baz'

objA.Foo === objB.Foo

It's just how JS works.

[KRHugo]

I understand that it's how javascript works.

However, the document explains that the previous value will be different.

https://alpinejs.dev/magics/watch#deep-watching

[ekwoka]

Ooh, interesting then it's an unintended bug.

[joshhanley]

@Babelfisch we are now using discussions to track bugs and ideas instead of issues. See this announcement for more details #1423

[Fak3]

I am facing the same issue. Is there any known workaround? How can i get the old value of the json object?

[whitefang57]

Also facing this issue as well! I'd appreciate if that limitation could be better documented in the deep-watching section of the docs, or if someone could take a look at #4406.