Version

3.0.1

Reproduction link

https://codesandbox.io/s/jolly-andras-si347

Steps to reproduce

click update button

What is expected?

Expect Lazy to run update

What is actually happening?

update not executed

The component doesn't re-render because the only reactive dependency of the template - errorlazy did not change. errorlazy.src did change, but that property is not a dependency of the component.

So neither the component's nor the directive's updated() hook runs, and that's expected.

you can however use i.e watch() in the directive to listen to changes of the object that was passed.

Another solution:

<div v-lazy="{ src: errorlazy.src }" />

The component doesn't re-render because the only reactive dependency of the template - errorlazy did not change. errorlazy.src did change, but that property is not a dependency of the component.

So neither the component's nor the directive's updated() hook runs, and that's expected.

you can however use i.e watch() in the directive to listen to changes of the object that was passed.

thank you

Another solution:

<div v-lazy="{ src: errorlazy.src }" />

thank you,but this operation is very troublesome

Another solution:

<div v-lazy="{ src: errorlazy.src }" />

Can only do this, thank you

directive hook is not called in render phase, so vue doesn't know it is related to the component rendering

technically it is possible to make every prop change of a reactive object cause re-rendering. but it is not efficient. For example:

render () {
  return reactive.a
}

reactive.b = 'c' // it'd better not cause re-rendering

@07akioni thank you,learn a lot from you