Directive does not behave the same on component as it does on element.

[autumnwoodberry]

Version

2.5.16

Reproduction link

https://codepen.io/autumnwoodberry/pen/XBamPN

Steps to reproduce

There are 4 input elements on the page. Each element has had the custom v-active-input directive applied. This directive attempts to read the value of the element and if that value is present it will add the .active class to the element.

There are 4 cases tested here:

• A native input element with a v-model value that is defined in the component's data option.
• A custom input component with a v-model value that is defined in the component's data option.
• A native input element with a v-model value that is initially empty and then defined in the component's mounted hook.
• A custom input component with a v-model value that is initially empty and then defined in the component's mounted hook.

Observe that the 4th input element does not have the .active class applied. Modify the text in the 4th input element (for example, just add a few more characters). Observe that after changing the value of the input the .active class is applied to the 4th element.

What is expected?

All input elements have the .active class from the start, regardless of if that input element is inside of a custom component, and regardless of when that value prop is defined or updated.

What is actually happening?

The directive does not behave the same on a component as it does on a native element - the 4th input element on the page does not have the .active class applied.