Version

3.2.4

Reproduction link

https://codesandbox.io/s/ripple-directive-0zybz

Steps to reproduce

• Open devtools and click on the console tab
• Click where it says "Click me" and see the color class that is applied to the ripple directive, then
• Click on where it says "Update ripple color class" and check the console

What is expected?

It should not call updated hook twice?

What is actually happening?

It calls the updated hook twice

Not really sure if it is a bug but im expecting the updated hook to be called only once for the property that was updated when clicking on "Update ripple color class" button, since it gets called twice it removes the listener for both the button and div and then register both again resulting in incorrect styles being applied which is NOT i want

From the docs:

updated: called after the containing component's VNode and the VNodes of its children have updated.

When a component updates, the whole render function is run again, and in this re-run, directive hooks are ran again.