It really is awful and smells of leaky abstraction.

Now that this is the recommended way of writing Vue, I’d be really interested in your opinion on React.

Compare the “ref” in Vue with useState hook in React.

With the useState you get back two items: the value, and a setter.

Now every time you access the value you simply access it like a variable because it is.

That's because the return value of useState is a different thing from Vue ref, and the way code is run for each component (reactivity cycles etc) is completely different.

Sigh, I wish people put some effort in actually understanding these things before posting opinions.

Why are you under the pretence I don’t know the difference? I clearly know the difference.

I’m discussing the ergonomics of the API and its resulting DX.

Sigh, I wish people put some effort into actually reading the thing before posting opinions.

That's just how Proxy works in JavaScript. You might want to read a bit more about the underlying mechanism.