vue父子组件传值，复杂类型传值导致父组件数据错误

问题：父组件传子组件值时，若传复杂类型对象或数组时，相当于把源数据传给了子组件，子组件改变这些数据，会引发父组件数据发生变动，引起错误。

若在父组件深度监听该复杂数据时，会得到变动的数据

父组件

<template>
  <div class="home">
    {{ base }}父
    <input type="text" v-model="base.obj1" />
    <Son :arr="{ arr: base.list, obj1: '222' }" />
  </div>
</template>

<script>
import Son from './son.vue';
export default {
  name: 'HomeView',
  data() {
    return {
      base: {
        list: [{ a: 'q' }],
        obj1: 'qw',
      }
    };
  },
  watch: {
    base: {
      handler(nV, oV) {
        console.log(nV, '2222', oV);
        this.base.obj1 = '';
      },
      deep:true
    }
  },
  components: { Son }
};
</script>

子组件

<template>
  <div class="home">
    {{ addTable }}
    <el-button @click="btn">添加</el-button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      addTable: { list: [] },
    };
  },
  props: {
    arr: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    arr: {
      handler(nV, oV) {
        // if(nV,oV) {
        // if(JSON.stringify(nV) != JSON.stringify(oV)) {
        console.log('1111');
        this.addTable.list = this.arr.arr;
        // }
        // }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    btn() {
      this.addTable.list.push({ a: '22' });
    },
  },
};
</script>