Computed re render is inconsistent.

[Cheese-Yu]

Vue version

3.4.23

Link to minimal reproduction

https://play.vuejs.org/#eNp9U8tu2zAQ/BWCF8moI8FxTo5spDFyaA5x0fRWFoUir2TFFEnw4dgQdOml31T0e4r+RpeUZefQxgYManZnPDtctfS9UsnOAZ3RzBS6VpYYsE4tmKgbJbUlLdFQjkkhG+UsrElHSi0bEiEpYoKJQgpjSWMqMved8eh6wArphD2iX1qePwGfkWgSjckux9Ok+3ruVdyZlQDsHv4obpkg3szMt5P5ggSAYIMwkkPCZRVH706fXtYrEtKN/W/lufHIU+8fVw+JyrWBOByN1bWo6vIQB5MJMh2MRkjrvIL/pikBYUEzUTpR2FoKIsVyk4sKUDN4OZru2YlyZhNPLye9BQykx3GkKEKoO4oWvC62w9got+aw9BD29V7/Jz25nHpp1MnS/qrwkvDBQqN4bgGfCMk2k0XbnuLsuixFJFRqgbmS3UUj18DnjKJDRsnNFg5r+SKSMCzCw5CM9rQnZy3OfhN8Y/2VZaQbe+DgxXJd1eKCQ4mZX6n9NdL/fP/5+8evLL0NCqiWpSevdEytwQzKukqejRS4f2FuRv391xz0SvnMDaOz4eIZzTmXL/cBs9pBuOXA2UCx/Qf+bPYeY/SjBgN6h0OdahYdg+3Ld48PsMfzqYgZOY7dbxQ/AW6h8x77tlvnc9Gv+oLbD+EtwmX7bO72FoQZhvJGz7vKKL5PyzdGP9udJleBh6uAKX7bgfaaGCAWkssp7f4CUMxF+w==

Steps to reproduce

1. Click Button, <h1> didn't re render.
2. input something, <h1> has re render.
3. keydown.enter, <h1> has re render.

What is expected?

Computed trigger re render is inconsistent.

What is actually happening?

Why only 'msg' changed can make <h1> re render?

System Info

No response

Any additional comments?

No response

[warunacds]

As I understand what's happening here, plusOne is a computed property of count that returns a copy of count, so when you change plusOne, it wants to trigger Vue's reactivity system.

Changing the handleClick function to change count directly will trigger the reactivity system.

const handleClick = () => {
  count.value.push(123);
}

as per

function onChange() {
  plusOne.value.push(321);
  msg.value = '';
}

When msg changes, DOM get updates, and that will render the new values in plusOne

[LinusBorg]

Correct analysis by @warunacds

Your computed returns a copy of the reactive array, and that copy is plain, non-reactive. changing it (i.e. by pushing to it) will not trigger any reactive effects.