通过添加按钮复制的模块父子组件中的数据相互影响如何避免？

请教，uniapp中（vue2），通过添加按钮复制的模块父子组件中的数据相互影响如何避免，试了几种深拷贝方式都无效。
如图，点击“继续添加按钮”可以复制模块，希望复制模块和原来模块之间数据相互独立，互不影响，而实际上橘色字体部分的数据是相互联动的，不管哪个模块选择数据，另外模块都会变成同样内容，请教这种情况如何处理，代码该怎么写呢？

sortarr是通过云数据库请求下来的三级数组，然后通过页面传值接收过来的

<uni-forms class="specs" v-for="(item,index) in sku" :key="index">
    <view class="items">
        <view class="">选择商品(第{{item.title}}组)</view>
        <!-- 当sku的长度大于1，显示删除按钮，否则隐藏 -->
        <view v-if="sku.length > 1" @click="deleteSku(index)">删除</view>
    </view>
    <view class="items">
        <view class="">
            <view class="box-body" @click="toggle('bottom')">
                <view class="" style="color: #FF8247;">{{itemsgrade2name}}->{{itemsname}}</view>
            </view>
            <view>
                <uni-popup class="popuplevel" ref="popup" background-color="#fff" @change="change">

                <view class="popup-content"
                        :class="{ 'popup-height': type === 'left' || type === 'right' }">
                        <text class="popuptitle">请选择服务商品</text>
                        <view class="content1">
                            <view class="left">
                                <scroll-view :scroll-y="true" :scroll-with-animation="true"
                                    :scroll-into-view="clickToId" :style="{'height':windowHeight}">
                                    <view v-for="(v,n) in item.sortarr" :key="n" v-if="v.grade1 === name">
                                        <view v-for="(item,i) in v.grade2" :key="i"
                                            @click="selectitemsgrade2name(''+item.name)">
                                            <view :class="['title',{active:i===currentNum}]" :id="'to'+i"
                                                @click="setId(i)">
                                                        {{item.name}}
                                                    </view>
                                                </view>
                                            </view>
                                        </scroll-view>
                                    </view>
                                    <view class="right">
                                <scroll-view :scroll-into-view="clickId" @scroll="scroll"
                                    :scroll-with-animation="true" :scroll-y="true"
                                    :style="{'height':windowHeight}">
                                    <view v-for="(v,n) in item.sortarr" :key="n" v-if="v.grade1 === name">
                                        <view v-for="(item,i) in v.grade2" :key="i">
                                            <view class="title1,right_title" :id="'po'+i">---{{item.name}}---
                                            </view>
                                            <view v-for="(item,j) in item.grade3" :key="j">
                                                <!-- 打印出来的name部分为undefined，此时需要给参数增加空字符串，如下： -->
                                                <text class="item" v-model="itemsname"
                                                    @click="selectitemsname(''+item.name)">{{item.name}}</text>
                                            </view>
                                        </view>
                                    </view>
                                </scroll-view>
                            </view>
                        </view>
                    </view>
                </uni-popup>
            </view>
        </view>
    </view>
</uni-forms>

逻辑部分

data() {
            return {
                // 三级类目
                itemsname: "请选择商品类别",
                //二级类目
                itemsgrade2name: "-",
                //sku数据
                sku: [{
                    title: 1,
                    sortarr: [],
                    image: []
                }],
                
            }
        },

onLoad: function(option) {
            // 从页面栈中获取参数
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];
            this.sortarr = prevPage.data.sortarr;
            this.sku[0].sortarr = this.sortarr;
methods: {
            // 通过点击事件把选中的值传给itemsgrade2name
            selectitemsgrade2name(name) {
                this.itemsgrade2name = name;
            },
            // 通过点击事件把选中的值传给itemsname
            selectitemsname(name) {
                // console.log(name)
                this.itemsname = name;
                this.$refs.popup[0].close()
                //通过点击选择数据触发弹出层关闭，暂不考虑高度低于屏幕的问题
            },
            //继续添加商品
            addnewsku(e) {
                let number = this.sku[this.sku.length - 1].title;
                number++;
                let sortar=e[0].sortarr;
                const srota=_.cloneDeep(e[0].sortarr)
                // const srota = Object.assign({}, e[0].sortarr);
                    console.log(srota)
                const newsku = {
                    title: number,
                    sortarr:srota,
                    image: []
                };
                console.log(newsku)
                this.sku.push(newsku);
            },
}

你好 你的问题 不在于深不深拷贝 , 我注意到你声明 itemsname,itemsgrade2name这两个变量 用来显示用户选择的商品,但是你这个变量只有一组
你想啊 你商品一绑定的是这俩 商品2绑定的还是这俩 是不是 就是这商品1=商品2=你定义的变量, 因此你这两个变脸 实际应该也是和sku是一个数组格式 商品1绑定商品1对应变量 商品2绑定商品2对应变量
可以把这两个变量 在sku每一项中声明 或者单独起一个数组 看你需求