DOM not updating after changing VueJS data - why?

Question

Vue.js

There is a component that takes a campaign object from the state .
In the created component, based on the properties of the object, I create another property of this object:

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

The template has code that depends on the new property and changes it (using radio buttons):

<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>

The last line is just to shorten the code - there is a cumbersome block that is shown depending on this status.
And the problem is that when the radio button is switched, nothing happens on the page, except for switching the radio button, although the text in the span described at the end of the code should change.
At the same time, exactly the same block of code, but with a different property, works fine and the text changes. The difference is that this other property is native to this campaign object , rather than being set on created .
I also noticed that the reaction to changing the status property occurs after changing any other property of the campaign object .
What do I miss in my work? Why is this happening?

Answer 1

In this case, exactly the same block of code, but with a different property, works fine and the text changes. The difference is that this other property is native to this campaign object, rather than being set on created.

It's clear. You obviously think that you don't need to read the documentation. You are wrong. Read .