Vue version

5a6e98c, 3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNVE1zmzAQ/SuKpjO2Zxw4tCeK3TadHNpD3UkyvRQfKCygBCSNJIwzHv/3roQFthNn4gMWb3fffj2xo9+kDDYt0IjGBhpZpwaWCSckFqYCdZ2JRgoO3FiMkM01KxYJzZlGz+eE9qgCC7oAD0VCArcg/nnsa1YLDfkYTxakSGsNvUPY583Zxh3w+K81RnAbx7KnAxnGXPWkywdRljWsLDjd7Yiz7vezOOzjLrGMya+GPg5c95XoHJf3eQedVIybOyj0dIY8w9tJWBz6ruLwaMoJj3WmmDTOxHDSypCVHeN3P3ZSKNGQhAbhKW53ltDPlgO2Li6HIm1rQ3aWa1ibjnqAIMf5Rml0lmxuPffumacmnc58rALTKu7f0NqPJyJGteD87c8u4ATaj3yZAuw5Hyk7xnPRBVkjcRGmYhp78c4NmErkY+lHIx5ryATXooagFuV08gElqP8OGlxP5o4z6PGJgyfrmcvhs9gnVhiHww7onBqNvAUrg0ctOF4Kly6hdmisBrWShmFeO7phrGldi+6nw456x5gKsqdX8Ee9tVhCfyvQoDa4x8FmUlWC20xCb+9/wRbPg7EReVuj9xvGO8CZtLbG3u2m5TmWfeTnqv3hpMZ4+aBvtwa49k3ZQsc9JBRVZtVxqfWx3I/BJxeHI8UpvtTqy++LXJ56xaFEw8X78ZrKpRJyVEkvv0Ef5llCRG4EaiTlXpBHCoeG2duB4sA4yFExk/77NFk7e5earDohn3Lo/qR1C2cqNAQ29qouiHcgX4inJdHAe1AfluakaQuYusjZW7Kk+/9809vh

Steps to reproduce

1. Open Web Developer Tools > Console.
2. Click on "printRefs" button. This prints current value of this.$refs.other': the instance of the other-component.
3. Click on "ToggleDisplay" and then on "printRefs" again. The other-component disappears and this.$refs.other is set to null.
4. Click on "ToggleDisplay" and "printRefs" again. State equivalent to 2.
5. Click on "ToggleOpen", then on "printRefs". We expect null, but this.$refs.other contains the other-component instance!

What is expected?

Clicking on "ToggleOpen" sets the open reactive data to false. This reactive data is bound to the open prop of the other-component, who watches changes on that prop and emits an event closed when false. The main component listens on the @closed event and sets the display reactive data to false when received. The display reactive data is bound to the v-if directive.

I would expect that setting display to false directly and indirectly (in the complicated sequence above) would lead to the same result: the component is unmounted, the instance destroyed and any $refs cleared.

What is actually happening?

$refs is not cleared and the instance is not destroyed.

System Info

No response

Any additional comments?

The above is a reduced example. As far as I could test the combination of prop -> watch -> emit -> v-if together with ref is needed to reproduce the issue.

In the context where the issue originally appeared there is not a linear dependency between open and display, and the watch callback does not know whether any listener of the @closed event will try to destroy the instance. Additionally, the original code uses v-for instead of v-if; in that case the $refs array seems to only grow and never shrink.

Please let me know whether something is unclear or more information is needed.

Thank you.