@Watch methods not firing unless a setTimeout is used to delay property setting

[eriklharper]

Stencil version:

[email protected] /Users/eri11048/Code/stencil-watch-bug
└── @stencil/[email protected] 

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
I'm expecting a @Watch method to fire on a couple of properties, one of which stores an array of points (which can't be reflected) and another property that is simply a boolean. In both cases, finding the element with document.querySelector and then immediately assigning values to both of these properties does not trigger the corresponding @Watch methods for these properties to fire. When the property setting is delayed by 2 seconds through the use of a setTimeout, the @Watch methods do fire in that case, which is unexpected.

Expected behavior:
The corresponding @Watch methods for declared @Props should fire regardless if they are delayed inside a setTimeout.

Steps to reproduce:

1. Clone this repo: https://github.com/eriklharper/stencil-watch-bug
2. npm i && npm start
3. Open Developer Tools, both the Elements panel and the Console
4. Notice that there are two instances of <my-component>, one called watcherFails and the other called watcherWorks. The properties set on watcherWorks are wrapped in a setTimeout of 2 seconds whereas the watcherFails is not.

Other information:
I posted my dilemma here originally in the Stencil Slack channel https://stencil-worldwide.slack.com/archives/C79EANFL7/p1589911299380700

[jeanbenitez]

customElements.whenDefined('my-component').then(() => {
  const watcherFails = document.querySelector("#watcherFails");
  watcherFails.componentOnReady().then(() => {
    watcherFails.histogram = histogram;
    watcherFails.hasHistogram = true;
  });
});

Components are lazy loaded and all stuff (watchers, listeners, methods, etc.) aren't ready with the custom element from the beginning. Using componentOnReady() works, that method returns a promise that is fulfilled when the component is already with all their things. Unfortunately this is not in official stencil doc, I don't know if it's suitable for official use (however, I have been using it in production for a while).

[tricki]

I usually just call the watcher method manually in componentWillLoad or connectedCallback, might work for you as well.