VueJS установить значение для вычисляемого свойства

Question

Я запутался в предупреждении VueJS о том, что

[Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться при повторном рендеринге родительского компонента. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Опора изменена: "moduleSpecificProps"

Этот код не рабочий; Извините, вид ленивый. Дело в том, что у меня есть дочерний модуль, который будет принимать свойство (moduleSpecificProps). Таким образом, если родительский элемент передает его, потомок будет использовать значение (свойство tableData: computed), в противном случае он будет использовать значение по умолчанию.

1. Но моя проблема, если я хочу изменить значение вычисляемого свойства внутри дочернего компонента, как я могу это сделать?
2. Должен ли я сохранить другое поле данных tableDataCurrentValue, обновить его и получить значение (вычисляемое свойство) из поля данных tableDataCurrentValue?

У меня такая мысль

1. Дочерний компонент будет иметь два поля данных "default_table_data" и "tableDataHolder".

2. И будет наблюдать за изменением 'moduleSpecificProps', когда изменение произойдет, я обновлю 'tableDataHolder'

3. И вычисленное свойство 'tableData' вернет (получит) данные из 'tableDataHolder', если не найдено, использует 'default_table_data'

4. При назначении значений вычисляемому свойству 'tableData' (дочерний компонент пытается обновить значение) он обновит 'tableDataHolder'. Кажется, это работает, но не уверен, что использование watch хорошо, похоже, что я всегда заканчиваю наблюдение.

// Дочерний компонент

<template>
</template>

<script>
    {
        props: {
            moduleSpecificProps: {
                type: Object,
                required: false
            }
        },
        data() {
            return {
                default_table_data: {
                    name: 'User Data',
                    columns: [{'name': 'User id'}, {'name': 'Name'}],
                    data: []
                }
            }
     },
     computed: {
        tableData: {
            get: function() {
                var tableData_temp = this.default_table_data
                tableData_temp['name'] = this.moduleSpecificProps['tableData']['name'] || this.default_table_data['name']
                tableData_temp['columns'] = this.moduleSpecificProps['tableData']['columns'] || this.default_table_data['columns']
                tableData_temp['data'] = this.moduleSpecificProps['tableData']['data'] || this.default_table_data['data']
                return tableData_temp
            },
            set: function(tableData) {
                var tableDataOld = this.tableData
                tableDataOld['name'] = tableData['name'] || tableDataOld['name']
                tableDataOld['columns'] = tableData['columns'] || tableDataOld['columns']
                tableDataOld['data'] = tableData['data'] || tableDataOld['data']
                this.moduleSpecificProps['tableData'] = tableDataOld
            }
        }
    }
  }
</script>

И родительский скрипт может определить экземпляр дочернего элемента следующим образом:

childConfig = {
    name: 'Student Mark Data',
    columns: [{'name': 'Student Name'}, {'name': 'Mark'}],
    data: [] 
}
<template>
    <child :moduleSpecificProps="childConfig"></child>
</template>