【报Bug】collapse响应式未触发问题

操作步骤：

<template>
<high-page>
<template #body>
<uni-collapse v-model="collapse" ref="collapseRef">
<uni-collapse-item title="产品信息" name="1" :open="collapse.includes('1')">
<uni-list>
<uni-list-item class="uni-list-item-required">
<template v-slot:body>
<view class="uni-list-item__input_context">
<text class="product">
选择明细信息
</text>
<!-- <button type="primary" size="mini" >扫码新增</button>-->
<!-- button会莫名其妙占据一行中的剩余空间，故用一层view包裹 -->
<view class="">
<button type="primary" size="mini" @click="getBookDetail">选择库存</button>
</view>
<!-- <button type="primary" size="mini" @click="getproductList">新增产品</button> -->
</view>
</template>
</uni-list-item>
<!-- <uni-list-item v-if="!!detailForm.length" title="库存总数量" :rightText="total_amt" /> -->
<uni-list-item v-for="(item,index) in detailForm" :key="${item.id}&${index}">
<template v-slot:body>
<view class="item">
<view class="input">
<view style="display: flex;align-items: center">
产品:{{ item.product_name }}<button class="btn" type="warn" size="mini"
@click="onBookDel(index,-1,-1,'product')">删除</button>
</view>
</view>
<!-- <button class="btn" type="warn" size="mini" @click="onBookDetailDel(index)">删除</button>!-->
</view>
</template>
</uni-list-item>
</uni-list>
</uni-collapse-item>
</uni-collapse>
<uni-list>
<uni-list-item class="uni-list-item-required">
<template v-slot:body>
<view class="uni-list-item__input_context">
<text class="product">
选择明细信息
</text>
<!-- <button type="primary" size="mini" >扫码新增</button>-->
<!-- button会莫名其妙占据一行中的剩余空间，故用一层view包裹 -->
<view class="">
<button type="primary" size="mini" @click="getBookDetail">选择库存</button>
</view>
<!-- <button type="primary" size="mini" @click="getproductList">新增产品</button> -->
</view>
</template>
</uni-list-item>
<!-- <uni-list-item v-if="!!detailForm.length" title="库存总数量" :rightText="total_amt" /> -->
<uni-list-item v-for="(item,index) in detailForm" :key="${item.id}&${index}">
<template v-slot:body>
<view class="item">
<view class="input">
<view style="display: flex;align-items: center">
产品:{{ item.product_name }}<button class="btn" type="warn" size="mini"
@click="onBookDel(index,-1,-1,'product')">删除</button>
</view>
</view>
<!-- <button class="btn" type="warn" size="mini" @click="onBookDetailDel(index)">删除</button>!-->
</view>
</template>
</uni-list-item>
</uni-list>
</template>
<template #footer>
<high-button class="h_button" style="width: 100%;" title="取消" type="default"
@onSave="goback()"></high-button>
<high-button v-if="params?.id" class="h_button" style="width: 100%;" title="更新" type="primary"
@onCommit="submit()"></high-button>
<high-button v-else class="h_button" style="width: 100%;" title="提交" type="primary"
@onCommit="submit()"></high-button>
</template>
</high-page>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { onBeforeMount, onMounted, onUnmounted, ref, reactive, watch } from 'vue';
import utils from '@/common/utils';
// import detailEvent from '@/page/select/bookDetail/event.js'
const collapseTitle = ['植入信息', '基本信息', '手术及患者信息', '产品信息', '相关附件']
const collapse = ['0']

const detailForm = reactive([])  
const getBookDetail = async() => {  
    // if (!this.form.org_name) {  
    //   this.$tools.errorToast({title: '请选择仓库信息！'});  
    //   return;  
    // }  
  detailForm.push({product_name:'测试'})  
}  

onBeforeMount(()=>{  
})  

onMounted(async () => {  
    //下拉项预加载  
    // await initRange()  
    // await initFormData()  
    // await watchEvents()  

    // highFormProps1.value = {  
    //     dataname:'so_implant',  
    //     fields:implantField,  
    //     form:form.value  
    // }  
})  
onUnmounted(()=>{  
    uni.$off(detailEvent)  
})  

</script>

<style lang="scss" scoped>
.uni-collapse-item .uni-collapse-item ::before {
content: "";
margin-bottom: 15px;
background-color: #e5e5e5;
}

::v-deep .uni-collapse-item__title-text {  
    position: relative;  
    padding-left: 10px;  
    font-size: 17px !important;  
}  

::v-deep .uni-collapse-item {  
    padding-left: 0 !important;  
}  

::v-deep .uni-collapse-item__title-text:before {  
    content: '';  
    width: 4px;  
    height: 12px;  
    border-radius: 10px;  
    margin-right: 6px;  
    background-color: #2979ff;  
    display: block;  
    position: absolute;  
    left: 0;  
    top: 50%;  
    margin-top: -6px;  
}  

.example-body {  
    padding: 10px;  
    background-color: #fff;  
    height: 100%;  
    min-height: 130px;  
}  

.item {  
  width: 100%;  
  display: flex;  
  align-items: center;  

  .input {  
    width: 100%;  
    .title {  
      margin-top: 10rpx;  
      display: flex;  
      align-items: center;  
    }  
    .code {  
      padding-left: 10rpx;  
      margin-top: 10rpx;  
     // font-size: 14px;  
      color: #999;  
    }  
  }  

  .btn {  
  }  
}  

</style>

预期结果：

折叠面板内出现如折叠面板外 一样的内容

实际结果：

折叠面板外视图更新，折叠面板内未响应