reactivity issue with property watch and emit
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/vue@2.x 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
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 ...?
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
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.