Subscribe on changes!

readonly() breaks reactivity of Map

avatar
Apr 14th 2021

Version

3.0.11

Reproduction link

[https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbiAgaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCBjb21wdXRlZCwgcmVhY3RpdmUsIHJlZiwgd2F0Y2hFZmZlY3QsIHJlYWRvbmx5IH0gZnJvbSAndnVlJ1xuICBcbiAgZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHtcbiAgICBzZXR1cCAoKSB7XG4gICAgICBjb25zdCBpZHMgPSByZWYoW10pXG4gICAgICBcbiAgICAgIGNvbnN0IGFkZElkcyA9ICgpID0 IHtcbiAgICAgICAgaWRzLnZhbHVlID0gWzEsMiwzLDRdXG4gICAgICB9XG4gICAgICBcbiAgICAgIGNvbnN0IGl0ZW1zID0gcmVhY3RpdmUobmV3IE1hcCgpKVxuICAgICAgLy8gY29uc3QgaXRlbXMgPSByZWYoe30pXG4gICAgICAvLyBjb25zdCBpdGVtcyA9IHJlYWN0aXZlKHt9KVxuICAgICAgXG4gICAgICBjb25zdCByZWFkb25seUl0ZW1zID0gcmVhZG9ubHkoaXRlbXMpXG4gICAgICBcbiAgICAgIGNvbnN0IGFkZEl0ZW1zID0gKCkgPT4ge1xuICAgICAgICBpdGVtcy5zZXQoMiwgJ2ZvbycpXG4gICAgICAgIGl0ZW1zLnNldCgzLCAnYmFyJylcbiAgICAgICAgaXRlbXMuc2V0KDQsICdiYXonKVxuICAgICAgICBpdGVtcy5zZXQoNSwgJ3F1eCcpXG5cbiAgICAgICAgLyogaXRlbXMudmFsdWUgPSB7XG4gICAgICAgICAgICAyOiAnZm9vJyxcbiAgICAgICAgICAgIDM6ICdiYXInLFxuICAgICAgICAgICAgNDogJ2JheicsXG4gICAgICAgICAgICA1OiAncXV4JyxcbiAgICAgICAgICB9ICovXG5cbiAgICAgICAgLyogaXRlbXNbMl0gPSAnZm9vJ1xuICAgICAgICAgIGl0ZW1zWzNdID0gJ2JhcidcbiAgICAgICAgICBpdGVtc1s0XSA9ICdiYXonXG4gICAgICAgICAgaXRlbXNbNV0gPSAncXV4JyAqL1xuXG4gICAgICAgIGNvbnNvbGUubG9nKCdhZGRlZCBpdGVtcycpXG4gICAgICB9XG4gICAgICBcbiAgICAgIGNvbnN0IGl0ZW1zUmVzb2x2ZWRCeUlkcyA9IGNvbXB1dGVkKCgpID0 IHtcbiAgICAgICAgY29uc29sZS5sb2coJ3JlY29tcHV0aW5nIGl0ZW1zUmVzb2x2ZWRCeUlkcycpXG4gICAgICAgIFxuICAgICAgICByZXR1cm4gaWRzLnZhbHVlXG4gICAgICAgIFx0Lm1hcCgoaWQpID0 IHtcbiAgICAgICAgICBcdHJldHVybiByZWFkb25seUl0ZW1zLmdldChpZClcbiAgICAgICAgICAgIC8vIHJldHVybiByZWFkb25seUl0ZW1zLnZhbHVlW2lkXVxuICAgICAgICAgIFx0Ly8gcmV0dXJuIHJlYWRvbmx5SXRlbXNbaWRdXG5cdCAgICAgICAgfSkgXHRcbiAgICAgIH0pXG5cbiAgICAgIHdhdGNoRWZmZWN0KCgpID0 IHtcbiAgICAgICAgY29uc29sZS5sb2coJ3dhdGNoRWZmZWN0IGl0ZW1zUmVzb2x2ZWRCeUlkcycsIGl0ZW1zUmVzb2x2ZWRCeUlkcy52YWx1ZSlcbiAgICAgIH0pXG4gICAgICBcbiAgICAgIHJldHVybiB7XG4gICAgICAgIGlkcyxcbiAgICAgICAgYWRkSWRzLFxuICAgICAgICBpdGVtcyxcbiAgICAgICAgYWRkSXRlbXMsXG4gICAgICAgIGl0ZW1zUmVzb2x2ZWRCeUlkcyxcbiAgICAgIH1cbiAgICB9XG4gIH0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8ZGl2PlxuICAgIDxidXR0b24gQGNsaWNrPVwiYWRkSWRzXCI XG4gICAgICBBZGQgaWRzXG4gICAgPC9idXR0b24 XG4gICAgXG4gICAgPGJ1dHRvbiBAY2xpY2s9XCJhZGRJdGVtc1wiPlxuICAgICAgQWRkIGl0ZW1zXG4gICAgPC9idXR0b24 XG4gIDwvZGl2PlxuICBcbiAgPGRpdj5cbiAgICBpZHM6IHt7IGlkcyB9fVxuICA8L2Rpdj5cbiAgXG4gIDxkaXY XG4gICAgaXRlbXM6IHt7IGl0ZW1zIH19XG4gIDwvZGl2PlxuICBcbiAgPGRpdj5cbiAgICBpdGVtc1Jlc29sdmVkQnlJZHM6IHt7IGl0ZW1zUmVzb2x2ZWRCeUlkcyB9fVxuICA8L2Rpdj5cbjwvdGVtcGxhdGU In0=](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbiAgaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCBjb21wdXRlZCwgcmVhY3RpdmUsIHJlZiwgd2F0Y2hFZmZlY3QsIHJlYWRvbmx5IH0gZnJvbSAndnVlJ1xuICBcbiAgZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHtcbiAgICBzZXR1cCAoKSB7XG4gICAgICBjb25zdCBpZHMgPSByZWYoW10pXG4gICAgICBcbiAgICAgIGNvbnN0IGFkZElkcyA9ICgpID0 IHtcbiAgICAgICAgaWRzLnZhbHVlID0gWzEsMiwzLDRdXG4gICAgICB9XG4gICAgICBcbiAgICAgIGNvbnN0IGl0ZW1zID0gcmVhY3RpdmUobmV3IE1hcCgpKVxuICAgICAgLy8gY29uc3QgaXRlbXMgPSByZWYoe30pXG4gICAgICAvLyBjb25zdCBpdGVtcyA9IHJlYWN0aXZlKHt9KVxuICAgICAgXG4gICAgICBjb25zdCByZWFkb25seUl0ZW1zID0gcmVhZG9ubHkoaXRlbXMpXG4gICAgICBcbiAgICAgIGNvbnN0IGFkZEl0ZW1zID0gKCkgPT4ge1xuICAgICAgICBpdGVtcy5zZXQoMiwgJ2ZvbycpXG4gICAgICAgIGl0ZW1zLnNldCgzLCAnYmFyJylcbiAgICAgICAgaXRlbXMuc2V0KDQsICdiYXonKVxuICAgICAgICBpdGVtcy5zZXQoNSwgJ3F1eCcpXG5cbiAgICAgICAgLyogaXRlbXMudmFsdWUgPSB7XG4gICAgICAgICAgICAyOiAnZm9vJyxcbiAgICAgICAgICAgIDM6ICdiYXInLFxuICAgICAgICAgICAgNDogJ2JheicsXG4gICAgICAgICAgICA1OiAncXV4JyxcbiAgICAgICAgICB9ICovXG5cbiAgICAgICAgLyogaXRlbXNbMl0gPSAnZm9vJ1xuICAgICAgICAgIGl0ZW1zWzNdID0gJ2JhcidcbiAgICAgICAgICBpdGVtc1s0XSA9ICdiYXonXG4gICAgICAgICAgaXRlbXNbNV0gPSAncXV4JyAqL1xuXG4gICAgICAgIGNvbnNvbGUubG9nKCdhZGRlZCBpdGVtcycpXG4gICAgICB9XG4gICAgICBcbiAgICAgIGNvbnN0IGl0ZW1zUmVzb2x2ZWRCeUlkcyA9IGNvbXB1dGVkKCgpID0 IHtcbiAgICAgICAgY29uc29sZS5sb2coJ3JlY29tcHV0aW5nIGl0ZW1zUmVzb2x2ZWRCeUlkcycpXG4gICAgICAgIFxuICAgICAgICByZXR1cm4gaWRzLnZhbHVlXG4gICAgICAgIFx0Lm1hcCgoaWQpID0 IHtcbiAgICAgICAgICBcdHJldHVybiByZWFkb25seUl0ZW1zLmdldChpZClcbiAgICAgICAgICAgIC8vIHJldHVybiByZWFkb25seUl0ZW1zLnZhbHVlW2lkXVxuICAgICAgICAgIFx0Ly8gcmV0dXJuIHJlYWRvbmx5SXRlbXNbaWRdXG5cdCAgICAgICAgfSkgXHRcbiAgICAgIH0pXG5cbiAgICAgIHdhdGNoRWZmZWN0KCgpID0 IHtcbiAgICAgICAgY29uc29sZS5sb2coJ3dhdGNoRWZmZWN0IGl0ZW1zUmVzb2x2ZWRCeUlkcycsIGl0ZW1zUmVzb2x2ZWRCeUlkcy52YWx1ZSlcbiAgICAgIH0pXG4gICAgICBcbiAgICAgIHJldHVybiB7XG4gICAgICAgIGlkcyxcbiAgICAgICAgYWRkSWRzLFxuICAgICAgICBpdGVtcyxcbiAgICAgICAgYWRkSXRlbXMsXG4gICAgICAgIGl0ZW1zUmVzb2x2ZWRCeUlkcyxcbiAgICAgIH1cbiAgICB9XG4gIH0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8ZGl2PlxuICAgIDxidXR0b24gQGNsaWNrPVwiYWRkSWRzXCI XG4gICAgICBBZGQgaWRzXG4gICAgPC9idXR0b24 XG4gICAgXG4gICAgPGJ1dHRvbiBAY2xpY2s9XCJhZGRJdGVtc1wiPlxuICAgICAgQWRkIGl0ZW1zXG4gICAgPC9idXR0b24 XG4gIDwvZGl2PlxuICBcbiAgPGRpdj5cbiAgICBpZHM6IHt7IGlkcyB9fVxuICA8L2Rpdj5cbiAgXG4gIDxkaXY XG4gICAgaXRlbXM6IHt7IGl0ZW1zIH19XG4gIDwvZGl2PlxuICBcbiAgPGRpdj5cbiAgICBpdGVtc1Jlc29sdmVkQnlJZHM6IHt7IGl0ZW1zUmVzb2x2ZWRCeUlkcyB9fVxuICA8L2Rpdj5cbjwvdGVtcGxhdGU In0=)

Steps to reproduce

  1. Open the console.
  2. Click the "Add ids" button.
  3. Click the "Add items" button.

What is expected?

After clicking Add items, the itemsResolvedByIds computed effect should rerun.

What is actually happening?

The computed effect does not rerun.


Versions with a reactive object, and an object ref is present in the repro, but commented out. These can be used to show that the behaviour is only present in readonly reactive maps.

A fix for this issue seems to have been attempted before in #1772, but as far as I can see, it wasn't completely successful.

avatar
Apr 14th 2021

So clearly something weird happened with that link, here it is again, hopefully working this time.

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbiAgaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCBjb21wdXRlZCwgcmVhY3RpdmUsIHJlZiwgd2F0Y2hFZmZlY3QsIHJlYWRvbmx5IH0gZnJvbSAndnVlJ1xuICBcbiAgZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHtcbiAgICBzZXR1cCAoKSB7XG4gICAgICBjb25zdCBpZHMgPSByZWYoW10pXG4gICAgICBcbiAgICAgIGNvbnN0IGFkZElkcyA9ICgpID0+IHtcbiAgICAgICAgaWRzLnZhbHVlID0gWzEsMiwzLDRdXG4gICAgICB9XG4gICAgICBcbiAgICAgIGNvbnN0IGl0ZW1zID0gcmVhY3RpdmUobmV3IE1hcCgpKVxuICAgICAgLy8gY29uc3QgaXRlbXMgPSByZWYoe30pXG4gICAgICAvLyBjb25zdCBpdGVtcyA9IHJlYWN0aXZlKHt9KVxuICAgICAgXG4gICAgICBjb25zdCByZWFkb25seUl0ZW1zID0gcmVhZG9ubHkoaXRlbXMpXG4gICAgICBcbiAgICAgIGNvbnN0IGFkZEl0ZW1zID0gKCkgPT4ge1xuICAgICAgICBpdGVtcy5zZXQoMiwgJ2ZvbycpXG4gICAgICAgIGl0ZW1zLnNldCgzLCAnYmFyJylcbiAgICAgICAgaXRlbXMuc2V0KDQsICdiYXonKVxuICAgICAgICBpdGVtcy5zZXQoNSwgJ3F1eCcpXG5cbiAgICAgICAgLyogaXRlbXMudmFsdWUgPSB7XG4gICAgICAgICAgICAyOiAnZm9vJyxcbiAgICAgICAgICAgIDM6ICdiYXInLFxuICAgICAgICAgICAgNDogJ2JheicsXG4gICAgICAgICAgICA1OiAncXV4JyxcbiAgICAgICAgICB9ICovXG5cbiAgICAgICAgLyogaXRlbXNbMl0gPSAnZm9vJ1xuICAgICAgICAgIGl0ZW1zWzNdID0gJ2JhcidcbiAgICAgICAgICBpdGVtc1s0XSA9ICdiYXonXG4gICAgICAgICAgaXRlbXNbNV0gPSAncXV4JyAqL1xuXG4gICAgICAgIGNvbnNvbGUubG9nKCdhZGRlZCBpdGVtcycpXG4gICAgICB9XG4gICAgICBcbiAgICAgIGNvbnN0IGl0ZW1zUmVzb2x2ZWRCeUlkcyA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICAgICAgY29uc29sZS5sb2coJ3JlY29tcHV0aW5nIGl0ZW1zUmVzb2x2ZWRCeUlkcycpXG4gICAgICAgIFxuICAgICAgICByZXR1cm4gaWRzLnZhbHVlXG4gICAgICAgIFx0Lm1hcCgoaWQpID0+IHtcbiAgICAgICAgICBcdHJldHVybiByZWFkb25seUl0ZW1zLmdldChpZClcbiAgICAgICAgICAgIC8vIHJldHVybiByZWFkb25seUl0ZW1zLnZhbHVlW2lkXVxuICAgICAgICAgIFx0Ly8gcmV0dXJuIHJlYWRvbmx5SXRlbXNbaWRdXG5cdCAgICAgICAgfSkgXHRcbiAgICAgIH0pXG5cbiAgICAgIHdhdGNoRWZmZWN0KCgpID0+IHtcbiAgICAgICAgY29uc29sZS5sb2coJ3dhdGNoRWZmZWN0IGl0ZW1zUmVzb2x2ZWRCeUlkcycsIGl0ZW1zUmVzb2x2ZWRCeUlkcy52YWx1ZSlcbiAgICAgIH0pXG4gICAgICBcbiAgICAgIHJldHVybiB7XG4gICAgICAgIGlkcyxcbiAgICAgICAgYWRkSWRzLFxuICAgICAgICBpdGVtcyxcbiAgICAgICAgYWRkSXRlbXMsXG4gICAgICAgIGl0ZW1zUmVzb2x2ZWRCeUlkcyxcbiAgICAgIH1cbiAgICB9XG4gIH0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8ZGl2PlxuICAgIDxidXR0b24gQGNsaWNrPVwiYWRkSWRzXCI+XG4gICAgICBBZGQgaWRzXG4gICAgPC9idXR0b24+XG4gICAgXG4gICAgPGJ1dHRvbiBAY2xpY2s9XCJhZGRJdGVtc1wiPlxuICAgICAgQWRkIGl0ZW1zXG4gICAgPC9idXR0b24+XG4gIDwvZGl2PlxuICBcbiAgPGRpdj5cbiAgICBpZHM6IHt7IGlkcyB9fVxuICA8L2Rpdj5cbiAgXG4gIDxkaXY+XG4gICAgaXRlbXM6IHt7IGl0ZW1zIH19XG4gIDwvZGl2PlxuICBcbiAgPGRpdj5cbiAgICBpdGVtc1Jlc29sdmVkQnlJZHM6IHt7IGl0ZW1zUmVzb2x2ZWRCeUlkcyB9fVxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+In0=