Version

3.0.2

Reproduction link

https://jsfiddle.net/skirtle/jd9mnzu2/

Steps to reproduce

1. Click 'Button 1'. Note the logging. The root component has updated unnecessarily. If you click 'Button 1' again nothing will happen.
2. Click 'Button 2'. Both the root and child components will update. That is expected.
3. Click 'Button 1' again. This time the child component updates unnecessarily.

What is expected?

Clicking 'Button 1' updates the count property. That shouldn't trigger any rendering.

What is actually happening?

Extra rendering is occurring, first in the parent component and then in the child.

The key to this is the watch. If you comment out the contents of the handler it all works as expected with 'Button 1' not triggering any rendering.

The first problem is caused by the immediate: true. It seems that any reactive data read during that initial call is treated as a rendering dependency of the parent component. Presumably because the parent component is still considered to be rendering at that point.

The second problem is similar. The watcher is triggered by the prop change and the dependency seems to be registered against the rendering of the child.

Update:

The first problem can also be triggered using a created hook instead of an immediate watcher. See https://jsfiddle.net/skirtle/jd9mnzu2/1/ to reproduce that variant of the problem.