Reactive fail on 3.4.13

[mrquokka]

Vue version

3.4.13

Link to minimal reproduction

https://play.vuejs.org/#eNqVVU1v2zAM/SucL02BxMaQnbK26Db0sB22YestLgLFZhK1tuxJdJoiyH8fZfk7SbvlEFvkE/nIR8l771Oe+9sCvZl3RZjmiSC8CRXAVSy3ECXCmOvQwz+FzFNUtMi2qLcSn0OvRDGu3gXbiVwxdiUSg6076EXt45GRldklrN+BnatMc7RRrrMcNb0sYjTRGJqlEileglSAsaQFg9OF9ZnQa4PMnvCFY/T29PwkKcEuwiaZX5Tmi4cW2pB8sy+LRCwxCT0uYENpchy79NvYELSlBxz0dMNqV8/MSxNpmRMkQq05B3HZpR13eaYJYlyJIiHY2xCxIDG6dO8AGqnQql4BRCLa4IK0UIajy0yZGewPIAzsYc79m4EhLdX6gc0c1+VlWG0fd41lh2sPHOAwdmkOH+3TrVKkTRbbLM63RuqmLwXvxWmoA8gVjN61CCs/baTxj4u47OyCc6B5E+kBrrt4blq30gvf9y+qUo7cFdchxpXsfgbpXqaYFTRiIa5v+qn+n9yQnlhGfXonCR6huhQPl83iUL9Uo/I2v2qr09f9R1maF4RxI/PgmLYDabHKEGczPLJ2yo7Grjwz7cCVx7M7ZbY/bTEuXMPOsHceeiL0xhB6S/eIQq9mDcCsYDTYBdmqE6I3TA7ZaQUnKHt0dpLb3tqm2jJfEbcqthPIH4rZU7Hqxhn8yYkcKuw4HaloN1wFLhTfLt7Yk6m9XiapyP1Hkyn+aJTUw8rBt1Cjd+jxV8WuQ29DlJtZEESx4m0xJnKrfYUUqDwNbhkW6EIRH5BJnKW3U/+D/37K156hrt1Hk06WOns2qDkKy9jJE7CRL+CJRhWjRv2veQfberkHvqP8ZZe4SdwWMjwTK7keNMWeAZmg/lEq0W+OSJLs+VtpI13UivKeDUZPJ+yPZueK+sliWWadBpDQPHrOfff7O+74vXGmWVwklRBnnL/QZElhOTrY50LFTLuDK9l+LTXmI3dv7naEytRFWaLtyS8F+fJK6S3dqT9tunj4Cw/kyKI=

Steps to reproduce

Just run on 3.4.13

What is expected?

Work

What is actually happening?

... instead of translaton

System Info

No response

Any additional comments?

No response

[yyx990803]

/cc @johnsoncodehk

[yyx990803]

Simplified reproduction:

https://play.vuejs.org/#eNp9kU9Pg0AQxb/KuBcgQWrtraFN1PSgBzXa414Qpu1W2N3sn9qE8N2dBWl7MD3Bzvu94T22ZQ9aZwePbM5yWxqhHVh0Xi+5FI1WxkELBovSiQOmUKpGe4cVdLAxqoGInBGXAFyWSlryusIhLE6WuO0SLke1JGVcEccJLJbQBrfYQHwTR0UEQg4rkmR4ZgVZpoExlMr8qVnB5bCXsq5Fg8q7y31n6z2BKUzvCM4nQz9qRgeHja6JohNA21K0roP8FuxO+bqCLwzWfHKBsZQ5Sz02YpvtrZL0x/qPcRYqiRrNm3aCenI2H2IErahr9fPSz5zxmI7zcofl9z/zvT2GGWfvBi2aA3J20lxhtugGefX5ikd6P4mNqnxN9BXxA62qfcg4YI9eVhT7guvTPvf3LuR2bVdHh9KOpULQQHY9zxld/tOV6ue4s2zW++gyWPcLDLbORw==

[LinusBorg]

@yyx990803 Is that problem reproducible without a side-effect in the computed (or in render)? I can't find a way, at least.

If it's not, then as a theoretical question: Should we really support that? Or is it that we don't want to but need to support it to keep backwards compat for something that worked even though it has always been a discouraged practice?

[yyx990803]

This is indeed discouraged usage, but this is a regression nonetheless and should ideally be fixed.

[Doctor-wu]

I think the key to this problem is the computed was mutated in render lead the computed was marked to Dirty after the invocation of the render function. And I think that is a dangerous state of computed (marked as dirty, which means it won't be reactive anymore)

[mrquokka]

@yyx990803 Is that problem reproducible without a side-effect in the computed (or in render)? I can't find a way, at least.

If it's not, then as a theoretical question: Should we really support that? Or is it that we don't want to but need to support it to keep backwards compat for something that worked even though it has always been a discouraged practice?

@LinusBorg , hi, it was a part of some old js code with chartgpt translation to ts (with some bad practics). Can you make another short example how we can make it perfect?
We use vuex to lazy-load translations from server.
On this component we send some keys for translation.
We need make prop with keys reactive.

Of course, we can use watch with immediate and make computed watch keys (array is simple example, on project it may by dict) => and it will get soooo long and complex structure with hard upgrades after 2+ years if files not changes