Reactivity: iteration of map doesn't track reads

[jods4]

Version

3.0.0-alpha.4

Reproduction link

https://jsfiddle.net/zekxpsh7/1/

Steps to reproduce

The minimal reproduction should display 'good' twice, it displays 'bad'.

For the iteration bug, here's a modified test case, from Map.spec.js

    it('should observe for of iteration', () => {
      let dummy
      const map = reactive(new Map())
      effect(() => {
        dummy = 0
        // eslint-disable-next-line no-unused-vars
        for (let [key, num] of map) {
          key
          dummy  = num
        }
      })

      expect(dummy).toBe(0)
      map.set('key1', 3)
      expect(dummy).toBe(3)
      map.set('key2', 2)
      expect(dummy).toBe(5)
      map.set('key1', 4)     // added
      expect(dummy).toBe(6)  // added
      map.delete('key1')
      expect(dummy).toBe(2)
      map.clear()
      expect(dummy).toBe(0)
    })

This modified test fails.

A similar change can be made to it 'should observe values iteration'.

What is expected?

Iterating a Map, Map.entries or Map.values should count as taking a dependency on the values inside the map.

Changing one value (without adding nor removing a key) should run effects again.

What is actually happening?

Iterating a Map only tracks addition/removal. Modifications of map contents don't run effect, resulting in unexpected, stale values.

---

The culprit is here:
https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/collectionHandlers.ts#L168
When enumerating entries or values on a Map, next should call track on the key before returning the results, as it's effectively a read on the entry value.

Funnily enough, Vue is aware of the problem and chooses to work-around it rather than fixing it for everyone, see:
https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/apiWatch.ts#L264-L265