Maximum recursive updates exceeded in component in 3.4.15

[treardon17]

Vue version

3.4.15

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01v2kAQ/SsjXwA12I1oLxRQmiiV2kOLmh59MfZATL0f2p0lRMj/vbO7QI3bRLl5Z+bNvPfGc0g+a53uHCbTZGZLU2sCi+T0Ipe10MoQHKBUQjvCClpYGyVgwPWDTl6jsUp+KUpS5vlclGbLEB98ymUuSyUtgTZKW5hDheta4tK/hodcAshC4BTCJwA9a348kKnl5iqGGFC4hqYwuFUrng3Q5rIddVuHYdz7xHY4HMF8cUluGAikftrIg2dZ1Mxq+UEodFMQ8gtgVtW7xeEkLkDSXdE4hLadZT7p4R1IcpVER8ai0OmWQexpUJQfEzZPzhrzhE307zx5JNJ2mmVlJRlWYVPvTCqRMqlFdsNlmXGSaoHjSombSfohvf7IBCx14ylaMV4Z9WTRcJc8ORoX5mQc3KEZG5QVGjRvnduDXczu5f6Zf9oR20KWV7SuNz1T/KLqBs0PTTWv8MKcomnU07cQI+PwLKZ8xPL3f+Jbu4+ilgYDs44BVJgNUkzfP3zHPX+fk0JVrjku4oXkT7SqcZ5jLLt1smLanbrA9mvYMf+yv+z9nlDakyhPNLgR6sNC7l6R/pfuJJ10XIzXxB6yg+fTM7juXeXlPdwp/kX4KLhu+D6eC+4Ddu1k6Yf3DiScRiQT+6jVlvFHdvFMfbNQFwS1oSt0Bx4P5d0crjkJDCBnpG/FT5aTtH8AoE2GOg==

Steps to reproduce

Open the link and see the maximum recursion error

What is expected?

No maximum recursion error

What is actually happening?

Maximum recursion error

System Info

System:
    OS: macOS 14.1.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 65.34 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
    pnpm: 8.8.0 - ~/Library/pnpm/pnpm
  Browsers:
    Brave Browser: 120.1.61.120
    Chrome: 120.0.6099.234
    Safari: 17.1

Any additional comments?

I understand that computed properties should not have side effects, and this example does have a side effect, however there are some cases where classes/factories might modify some global reactive state for tracking purposes. In 3.4.14 and before this example works, but this breaks in 3.4.15.

In an ideal world, obviously nobody would ever modify anything inside of a getter, making all getters "pure" functions. I don't know if this is necessarily a realistic requirement in the real world, especially if all previous versions of Vue 3 (whether intentionally or unintentionally) supported this.

I believe other people are possibly running into this issue:
#10210
#10172
#10158

I'm pretty confident that this PR introduced this behavior: #10123

[pdesmarais]

Got this issue earlier today when updating to 3.4.15. Checking at where this is happening, I don't think I have any side effects from computed values but I do have a reference to an external class which might be causing this. Checking if I can build a repro for this.

[pdesmarais]

Got this issue earlier today when updating to 3.4.15. Checking at where this is happening, I don't think I have any side effects from computed values but I do have a reference to an external class which might be causing this. Checking if I can build a repro for this.

So, please ignore my previous comment. I fixed the issue on my side. Was actually a simple fix once I understood what was happening.

The only thing I'd say is that even though this is the correct behaviour, this breaks previous behaviour so it should be marked as a breaking change or pushed back to a major release.

[Doctor-wu]

@johnsoncodehk I think this is also a question about the computed trigger their deps while getting the effect's value. However, computed will not cause a maximum recursion issue since computed values are lazily calculated, and they are only marked as MaybeDirty. It might be more reasonable if computed, render, and watch all have the same behavior regarding maximum recursion (either all cause it or all do not cause it), WDYT.

[pjninnim]

I've got the same issue which was not present within 3.4.14. Here is simple replication of how I've managed generate the error along with a work around. I hope this help!

https://play.vuejs.org/#eNqNU01v2zAM/SuCLk2BRMaQ7RKkQdehh+2wDtuOvrg2naqxPiDRbgDD/72UFbuuUwS9RBEf+d4jRbf8u7WiqYFv+NbnTlpkHrC2u1RLZY1D1jIHWY6ygSXLjbI1QsE6Vjqj2BVVXqWasVTnRnuqxQyB3Ywlizag2Yb1J2MIHscLAftM6g0rs8pDjHXLeJaXs8JBP911qgfpQH3nzAE06Q9GF4trdrOLVL03kRF6YhZCnGLnoidNdPVMklFvWDsd6c4tPBwuy4tS9NyUNZB/RLhN4mvQO9AFQdmKULoxti1ks2vbacNdt01CdA6TmTdom0xo+JKjJ9el3ItnbzS9f+8y5cG7rMA9WJTUVcrHoaQ8qyrz8quPBfOnsVHNE+SHD+LP/hhiKf/jwINrIOUjhpnbA0b4/t9vONL/EVSmqCvKvgD+BW+qOniMaXe1Lsj2JK93+7PfYqn3//39EUH7oalh+nHjUk6r/ONC629212I9rB9NMX4lK5XZ2Rwj8J6ENKLZJ0TrN0mSF5rKCqhk44QGTLRVyS2lJa7WKBWsCqNu1+Kr+PKNntHjNC7Aq9WjMy80WmKZdB4I+nm7lQNdgAtz+ZzurOyd9gw70x/H0r0CfkVyZQ==

I believe this is linked to #10114

[lmc3s3f0r]

Having a similar issue in a project using with vue-openlayers (I'd like to add a repo to showcase the issue, but the project is quite large and it's tough to add everything), but not with v-for. Just in a prop passed as a ref.

If it helps, I've tried with some versions with these results:
-3.3.4 and 3.4.14: everything works fine
-3.4.13 and 3.4.15: the "Maximum recursive updates exceeded" error appears

[lmc3s3f0r]

I just tried 3.4.16 and I'm getting the same "Maximum recursive updates eceeded".

[Doctor-wu]

I just tried 3.4.16 and I'm getting the same "Maximum recursive updates eceeded".

you can commit a new issue and provide a minimal reproduction since this issue is closed

[lizthegrey]

Confirmed that the fix worked fine for my case.