v-model on components seem not to correctly bind properties

[thet]

Version

2.5.21

Reproduction link

https://codepen.io/thetetet/pen/QzjyEZ

Steps to reproduce

In the example app there are two instances of the same "Search input" component.

1. First component: Value is bound via v-model AND v-bind

2. Second component: value is only bound via v-model

What is expected?

When using v-model only, I expect the property to be reactive and data changes in the parent component should be reflected in the v-model-bound component.

In the example linked above, I expect the "default term" value from the search_term data variable to show up in the second component, which binds via v-model.

What is actually happening?

When using v-model only, data changes in the parent component are not reflected in the v-model-bound sub component. When using v-bind additionally, it is.

---

Seems to be related to: #8430

[Sand3r205]

Unfortunately, your reproduction link isn't complete and is missing the referenced code.

When using v-model on a custom component it is important to define the model option.
Within the custom component you need to emit the change event so that the parent component knows the model has changed. Take a look at the customInput component I created: https://codesandbox.io/s/6xw3yv2wyn

Source: https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

[thet]

@Sand3r205 sorry - the codesandbox obviously needs some kind of deploment - your's is empty too!
I updated the reproduction link to:
https://codepen.io/thetetet/pen/QzjyEZ

[posva]

as @Sand3r205 said, you need to add the model option to use a prop named differently than value