Subscribe on changes!

reactivity issue with property watch and emit

avatar
Sep 22nd 2020

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

avatar
Sep 22nd 2020

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 ...?

avatar
Sep 22nd 2020

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

avatar
Sep 22nd 2020

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.

avatar
Sep 23rd 2020

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.