Custom directive binds differs on components vs elements

Version

2.6.10

Reproduction link

https://jsfiddle.net/bponomarenko/uom10qd2/

Steps to reproduce

1. Open browser console.
2. Click on Toggle button two times.

What is expected?

Directive will emit the same console messages when applied to DOM elements and to components (on init and after click on button).

I’m not sure what should be expected output. Either

bind: first comp
bind: first elem
unbind: first comp
unbind: first elem
bind: first comp
bind: first elem

or

bind: first comp
bind: first elem
unbind: second comp
unbind: second elem
bind: first comp
bind: first elem

What is actually happening?

Messages from the directive are the same on init, but different after button have been clicked.

Actual console output:

bind: first comp
bind: first elem
unbind: first comp
unbind: second elem
bind: second comp
bind: first elem

---

It seems that order in which directives are applied to DOM elements and components are different. In my setup I have custom directive which relies on some DOM attribute with configuration data. When this custom directive is bound/unbound in a “regular flow” – everything works as expected (directive binds after element attributes are updated). However when directive is bound/unbound in case of Vue “in-place patch strategey”, behavior seems to be different.

[posva]

Seems like the directive is called with the old component (because it’s reused) but it still has old attrs

As a workaround, set a key on one of the components

[bponomarenko]

@Justineo I understand the concepts behind an optimization itself. In my situation, custom directive is responsible for adding the state attribute to element on bind and removing that attribute on unbind. And directive is perfectly added/removed when component is re-used by Vue.js. However order of component properties update and directive initialization is different in different moments of component lifetime, which makes it hard to develop custom directives. Indeed additional documentation on these optimization techniques might be helpful, but inconsistent directives lifecycle events are rather a bug to fix in my opinion.