Не обновляется DOM после изменения данных VueJS — почему?

Question

[Денис Букреев]

Есть компонент, который берет из состояния объект campaign.
В created компонента, на основании свойств объекта, я создаю еще одно свойство этого объекта:

this.campaign.status = this.campaign.schedule ? 'dates' : 'now'; // новое свойство

В template есть зависящий от нового свойства и изменяющий его код (с помощью радиокнопок):

<app-radio name="schedule"
           :value="campaign.status == 'now'"
           @input="campaign.status = 'now'"
></app-radio>
<app-radio name="schedule"
           :value="campaign.status == 'dates'"
           @input="campaign.status = 'dates'"
></app-radio>

<span>{{campaign.status}}</span>

Последняя строка просто для сокращения кода - там громоздкий блок, который показывается в зависимости от этого статуса.

И проблемес в том, что при переключения радиокнопки ничего не происходит на странице, кроме переключения радиокнопки, хотя должен изменяться текст в span, описанном в конце кода.

При этом точно такой же блок кода, но с другим свойством, отлично срабатывает и текст меняется. Отличие в том, что это другое свойство изначально есть в этом объекте campaign, а не устанавливается в created.
Так же я заметил, что реакция на изменение свойства status происходит после изменения любого другого свойства объекта campaign.

Что я не учитываю в работе? Почему так происходит?

Answer 1

[0xD34F]

При этом точно такой же блок кода, но с другим свойством, отлично срабатывает и текст меняется. Отличие в том, что это другое свойство изначально есть в этом объекте campaign, а не устанавливается в created.

Ясно. Вы, очевидно, думаете, что документацию читать не надо. Вы ошибаетесь. Читайте.