Vue: Triggering a listener of a functional component breaks reactivity in Safari 12.1, if iframe is on the page

[mvy-siteimprove]

Version

2.6.10

Reproduction link

https://jsfiddle.net/ebgj6fra/2/

Steps to reproduce

• Access the fiddle
• click the "change" button

What is expected?

Hello world! should change to tada!

What is actually happening?

In latest Safari (12.1) on Mac OS, nothing happens, but it works as expected in other browsers.

---

Removing the iframe from the page makes the issue go away, as seen here: https://jsfiddle.net/ebgj6fra/3/

Seems like maybe there's a difference in how/when the latest Safari runs the flushCallbacks.

Conditionally rendering the iframe (v-if="myExpression !== null), triggering the listener inside a setTimeout or calling $forceUpdate circumvents the issue.

[posva]

Thanks for the boiled down repro 👌

[vanputten]

This issue still exists. Perhaps this should be mentioned somewhere in the Vue docs?

We used this as a fix in our main Vue instance:
mounted: function() { this.$forceUpdate(); }