title: V-model property is updated only after page refresh
body: <p>I have two checkboxes. Their values must be equal to watched computed properties. I can see reactive changes in my Vue extension if those properties were changed but I can see new checkbox states only after page refreshing. How can I update my component if watched computed property was changed? </p>
  
  <p>Here is what I have in the template:</p>
  
  <pre><code>...
  &lt;input type="checkbox" v-model="emailSending"&gt;
  &lt;span class="ml-10 checkbox-label"&gt;Email&lt;/span&gt;
  &lt;input type="checkbox" v-model="phoneSending"&gt;
  &lt;span class="ml-10 checkbox-label"&gt;Sms&lt;/span&gt;
  ...
  &lt;script&gt;
  data() {
      return {
        emailSending: true,
        phoneSending: true,
      };
  },
  watch: {
      playerEmailSending(value) {
        this.emailSending = value;
      },
      playerPhoneSending(value) {
        this.phoneSending = value;
      },
  },
  computed: {
      ...mapGetters(['getPlayerNotifications', 'getPlayer']),
      playerEmailSending() {
        return this.getPlayer.data.emailSending;
      },
      playerPhoneSending() {
        return this.getPlayer.data.phoneSending;
      },
  },
  methods: {
      ...mapActions(['loadPlayerNotifications']),
      save() {
        this.loadPlayerNotifications({
          emailSending: this.emailSending,
          phoneSending: this.phoneSending,
        });
      },
  },
  &lt;/script&gt;
  </code></pre>
  
  <p>UPDATE:
  As this page with checkboxes is a child of another page, here is what I have in my parent page:</p>
  
  <pre><code>...
  // call an action which will fetch data about the player. 
  // This data I will get with `getPlayer` getter in my child page.
  created() {
      this.loadPlayer();
    },
  methods: {
    ...mapActions(['loadPlayer']),
  },
  ...
  </code></pre>