javascript - Vue JS v-model data doesn't update when used with watch

Question

Here is my code

data() {
  return {
    crop_mode: 'portrait',
    widget_data:''
  }
},

watch: {
  widget_data: function (val) {
    this.crop_mode = val.crop_mode
  },
},

This code is inside a modal component. So whenever a modal is opened, "widget_data" changes. And this widget_data has a "crop_mode" which needs to assigned to the data variable "crop_mode"

This works fine if I console.log the val.crop_mode but when I do v-model on crop_mode like below, it doesn't update the checked radio button.

<label class="custom-radio block">
  <input
    type="radio"
    value="portrait"
    name="crop_mode"
    v-model="crop_mode"
  />
  <span>Portrait</span>
</label>
<label class="custom-radio block">
  <input
    type="radio"
    value="landscape"
    name="crop_mode"
    v-model="crop_mode"
  />
  <span>Landscape</span>
</label>
<label class="custom-radio block">
  <input
    type="radio"
    value="square"
    name="crop_mode"
    v-model="crop_mode"
  />
  <span>Square</span>
</label>

question from:https://stackoverflow.com/questions/65921723/vue-js-v-model-data-doesnt-update-when-used-with-watch

Answer 1

You should add deep:true option because It looks like widget_data is an object with nested values:

watch: {
  widget_data:{
      handler(val) {
         this.crop_mode = val.crop_mode
      },
     deep:true
    }
},