data.push无法监听到数据变化

[lidppp]

建议在water-fall.vue源码102-105行的watch中添加option配置
{
deep: true
}

[lidppp]

简单的复现代码如下

<template lang="pug">
div.main(style="margin-top:80px")
  water-fall(gap="10px" width="330px" :data="dataArr" :delay="true" )
    template(v-slot="item")
      water-fall-item(:data="item")
</template>

<script setup>
import WaterFall from 'kuan-vue-waterfall'
import WaterFallItem from "./water-fall-item.vue"  // 这个组件是我自己写的 不是包里面的, 代码在下面
import { ref } from "vue";
const dataArr = ref([])
for (let i = 0; i < 30; i++) {
  dataArr.value.push({
    key: i,
    src: "https://api.yimian.xyz/img?type=moe&R18=false&time="+i
  })
}
setTimeout(()=>{
  // dataArr.value = [...dataArr.value]
  for (let i = 0; i < 30; i++) {
    dataArr.value.push({
      key: i+30,
      src: "https://api.yimian.xyz/img?type=moe&R18=false&time="+i+30
    })
  }
},30000)
</script>

<!-- water-fall-item.vue -->
<template lang="pug">
.water-fall-my-item
  img(:src="props.data.src")
  div item
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default:()=>({})
  }
})
</script>

<style scoped lang="scss">
.macy-item{
    transform: translateZ(0);
    transition: all .3s;

  .macy-item-img{
    object-fit: cover;
  }
}
</style>