Computed property changes in parent component does not cause it to re-render.

[rachitpant]

Version

2.6.11

Reproduction link

https://codesandbox.io/s/shy-sea-1fhky?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

1. Type something in the first text box , the changes are propogated to parent component newMessage and the v-modelled computed property changes.
2. However the parent component does not re-render , as a result the new value is not passed down.

What is expected?

As soon the computed property changes in parent component newMessage , the component should re-render and it should cause this property to be passed down to child Component.

What is actually happening?

The components computed property changes , but the component does not re-render.
As soon as the check the checkbox , the component re-renders as its data changes.

[posva]

The v-model is connected to a property of a computed property instead of the whole computed property ( <user-select v-model="editedMessage"/>). This is not possible since the computed property can only be set as a whole (that's when set is called), otherwise everything inside is read only, so it's not supposed to change and is not reactive.
So, either pass the whole computed property, or use an individual computed property for recipients that then propagates the changes to editedMessage