Data binding in vue not updating

Question

I have this code in two locations of a page (the post code needs to be displayed twice):

        <store-text-field
            :store_id="clonedStore.id"
            relation="address"
            field="post_code"
            @value-updated="postCodeUpdated"
            :value="clonedStore.address.post_code"/>

Within the component the post_code can be changed and the value passed back to the parent via the value-updated event.

The event code:

            postCodeUpdated(value) {
                console.log('post code updated to: ' + value)
                this.clonedStore.address.post_code = value;
            }

Every thing works fine, except the second component does not update with a new value if the post_code is changed in the other.

I expected the value to change as it is binded to this.clonedStore.address.post_code which is changed when the event is detected.

EDIT:

        data() {
            return {
                clonedStore: {
                    address: {
                        post_code: ''
                    }
                },
                showStoreNameInput: false,
            }
        },

Answer 1

It's a Reactivity issue you need to use $set for setting value.

try this.

this.$set(this.clonedStore.address,'post_code',value)