vue3 responsive problem by use reference data

<template>
  <div>
    <div class="lockcontent" v-show="lock.length">
      Lock :
      <template v-for="(item2) in lock">
        <div class="container">
          <span>{{ item2.name }}</span>
        </div>
      </template>
    </div>
    <button @click="handleLockData"> Add</button>
  </div>

</template>
<script setup lang="ts">

const lock = ref<any[]>([])

const newarr =[1,2,3,4]

const handleLockData = () => {
  newarr.push(Math.random())
  lock.value = newarr
}
</script>

as you can see,when i use this ways to push a random value to the newarr,then i
assignment the newarr to the lock.value,when i click this button the first time , the page can update and show me update value ,but the second time ,third time and more ,the page can’t update ,why?

i try to debug and saw source code,i find if i use those way to add some value to the non-responsive variable，the will not into nexttick in source code , but i don’t know why,may be i guest problems caused by reference data

>Solution :

Your lock is basically lock: {value: Reactive<any[]> }

The first time you change it’s value from ar1 = [] to ar2 = [1, 2, 3, 4, 5]

then you’ve pushed into non-reactive ar2

The second time you change it’s value from ar2 = [1, 2, 3, 4, 5, 6] to ar2 = [1, 2, 3, 4, 5, 6]. It’s the same object so it ignores the change.

You need to use lock directly to obrain Reactive<ar2>

lock.value.push(Math.random())