Привязка данных в vue не обновляется

Question

У меня есть этот код в двух местах страницы (почтовый индекс нужно отображать дважды):

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

Внутри компонента post_code можно изменить, а значение передать обратно в parent через событие value-updated.

Код события:

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

Все работает нормально, за исключением того, что второй компонент не обновляется с новым значением, если post_code изменяется в другом.

Я ожидал, что значение изменится, поскольку оно привязано к this.clonedStore.address.post_code, которое изменяется при обнаружении события.

EDIT:

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

Answer 1

Это проблема реактивности, вам нужно использовать $set для настройки значения.

попробуйте это.

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