Why doesn't the data in the object change after emit?

Question

Vue.js

I had the value true in the array, so it remains, but according to my logic, it should change
Here is my example
ModalComponent.vue

<template>
...
<div v-else class="row">
              <div class="col-sm-10">{{ field.label }}</div>
              <div class="col-sm-2"><input type="checkbox" v-model="field.disabled" @click="actionColumns(field.name, field.disabled)"></div>
            </div>
...
</template>

<script>
export default {
  props: ['item'],
  methods: {
    actionColumns(name, result){
      this.$emit('actionColumns', {name: name, disabled: result})
    }
  },
...
}
</script>

app.vue

methods: {
...
actionColumns(result) { // result = {name: "full_name", disabled: false}
            console.log(this.disabledColumnsData[result.name]); //ture
            this.disabledColumnsData[result.name] = result.disabled;
            console.log(this.disabledColumnsData[result.name]); //false
            console.log(this.disabledColumnsData); //  {full_name: true, ...}
          }
...
}

https://codesandbox.io/s/pyvjxxnnvj

Answer 1

Internal properties disabledColumnsDataare not reactive. You need to change them through

Vue.set(this.disabledColumnsData, result.name, result.disabled)