Computed value does not recompute when its most important dependency finally gets a value
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
I don't know how to reproduce this bug myself, I'm sorry. It does work in the playground. But would you please just watch this video? Maybe you notice something that I don't.
What is expected?
I'm expecting a computed value to be recomputed when one of its most important dependencies is finally given a value.
What is actually happening?
The computed value does actually recompute a bunch of times, but for some inexplicable reason NOT when the most important dependency finally goes from null to an object.
System Info
System:
OS: macOS 12.6
CPU: (8) arm64 Apple M1
Memory: 95.34 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.10.0 - ~/.nvm/versions/node/v18.10.0/bin/node
npm: 8.19.2 - ~/.nvm/versions/node/v18.10.0/bin/npm
Browsers:
Brave Browser: 89.1.22.71
Chrome: 106.0.5249.119
Safari: 16.0
npmPackages:
vue: ^3.2.31 => 3.2.37
Any additional comments?
The dependency variable, called order started as a $ref(null). Then I thought maybe the reactivity transform still has some bugs, so I turned order into a normal ref(null). That didn't change anything unfortunately. I can see in the debugging events of the $computed() that order is clearly identified as a dependency that the $computed() should be tracking. But it just doesn't recompute when order.value finally goes from null to some object. Again, please watch the youtube video I supplied.
Okay, my bad. I had made a mistake in the <template> which meant that the nextButton would never be shown anyway. Even then I still find it weird that it did not get recomputed, but maybe that's part of Vue's magic, that it won't recompute a value if it somehow "knows" that it wouldn't change the UI anyway.
As soon as I fixed my mistake in the UI, the $computed() started working normally again...