Vue-next: reactivity issue with property watch and emit

[prigaux]

Version

3.0.0

Reproduction link

https://jsfiddle.net/unz2ga94/

Steps to reproduce

On the minimal reproduction example, click on "via watch on component property"

What is expected?

it should display "global: indirectVal"

What is actually happening?

it displays "global: initialValue"

---

On the minimal reproduction example, you can replace https://unpkg.com/vue@next with https://unpkg.com/[email protected] to show the behaviour with Vue.js 2.x

Is this an expected regression? (I've read various migration stuff and didn't find any mention of this).

In the project that hit this issue, the component is doing stuff with textarea cursor: component code

[LinusBorg]

The data for "description" is correctly updated and the component even-re-renders - seems rather to be a bug in a vdom optimization? but then why do the other approaches correctly update the DOM?

Weird. renderTriggered is called for "description" as would be expected, but renderTracked isn't ...?

[posva]

This probably related to recent changes in the watch mechanism defaults. Using flush: 'post' fixes the problem:

      watch: {
        setit: {
          handler: 'tellParent',
          flush: 'post'
        }
      },

It's in the changelog

[LinusBorg]

But then the question remains why do we need to choose flush: post here, while Vue 2 - as explained in the linked changelog issue - is flush: pre and it works as it is in Vue 2 whereas in Vue 3, we now have to choose flush post? It doesn't seem like an intentional behaviour to me.

And if this is indeed a new behavior in Vue 3, then we need to properly document it.

[skirtles-code]

This looks like a re-occurrence of #1801.

If you explicitly set flush: 'pre' (so that the change in default value is not a factor) it works fine up until rc.11. It stopped working in rc.12.