How to make nested properties reactive in Vue

Question

I hava a component with complex nested props:

<template>
    <div>
      <a-tree :tree-data="data" :selected-keys="[selectedKey]" @select="onSelect" />
      <div>
        <a-input v-model="sheet[selectedKey].tableName" />
        <ux-grid ref="previewTable">
          <ux-table-column v-for="field in sheet[selectedKey].fields"
                           :key="field.name" :field="field.name">
            <a-input slot="header" v-model="field.label" />
          </ux-table-column>
        </ux-grid>
      </div>
    </div>
</template>

<script>
export default {
  props: {
    previewData: { type: Array, default: () => [] }
  },

  data () {
    return {
      data: this.previewData,
      selectedKey: '0-0-0',
      sheet: { 'none': { tableName: null, fields: [] } }
    }
  },

  created () {
    this.data.forEach((file, fid) => {
      file.sheets.forEach((sheet, sid) => {
        this.$set(this.sheet, `0-${fid}-${sid}`, {
          tableName: sheet.label,
          fields: sheet.fields.map(field => ({ ...field }))
        })
      })
    })
  },

  mounted () {
    this.$refs.previewTable.reloadData(this.data[0].sheets[0].data)
  },

  methods: {
    onSelect ([ key ], { node }) {
      if (key !== undefined && 'fields' in node.dataRef) {
        this.selectedKey = key
        this.$refs.previewTable.reloadData(node.dataRef.data)
      } else {
        this.selectedKey = 'none'
        this.$refs.previewTable.reloadData()
      }
    }
  }
}
</script>

And previewData props is something like:

{
  name: "example.xlsx",
  filename: "80b8519f-f7f1-4524-9d63-a8b6c92152b8.xlsx",
  sheets: [{
    name: "example",
    label: "example",
    fields:[
      { label: "col1", name: "col1", type: "NUMBER" },
      { label: "col2", name: "col2", type: "STRING" }
    ]
  }]
}
</script>

This component allows user to edit the label properties. I have to make Object sheet reactive to user input, and I tried $set and Object.assign, it works for sheets.label but fields[].label is still not reactive.

I wish to know what would be the declarative (and optimal) solution for it

Answer 1

You might need a watcher or computed property in React for previewData to be changed.