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

简单的复现代码如下

<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>

kuan1 / kuan-vue-waterfall

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