تغییر آبجکت های یکسان هنگام ذخیره در vue

سلام
APP.vue

<script setup>
import { ref } from 'vue';

import HelloWorld from './components/HelloWorld.vue';

let id = 0;
const dataArr = ref([]);
const datac = ref(null);
const addData = (data) => {
  ++id;
  data.id= id;
  datac.value= data;
  dataArr.value.push(data);
  // dataArr.value.push(JSON.parse(JSON.stringify(data)));
};

</script>

<template>
<pre>{{dataArr}}</pre>
<hr/>
<div>{{datac}}</div>
  <HelloWorld @add="addData" />
</template>

<style scoped>
 pre {
    text-align: left;
    white-space: pre-line;
  }
</style>

فرزند: HelloWord.vue

<script setup>

const emit = defineEmits(['add']);
function callAdd(data) {
  emit('add', data);
}

const items = [
  {
    name: 'name1',
    data: {
      des: 'des1',
      price: 6,
    },
  },
  {
    name: 'name2',
    data: {
      des: 'des2',
      price: 7,
    },
  },
  {
    name: 'name3',
    data: {
      des: 'des3',
      price: 9,
    },
  },
];
</script>
<template>
  <div class="card">
    <button
      class="btn"
      type="button"
      v-for="(item, index) in items"
      :key="index"
      @click="callAdd(item.data)"
    >
      {{ item.name }}
    </button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.btn {
  margin: 2px;
}
</style>

https://stackblitz.com/edit/vitejs-vite-snpv4r?file=src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue
می خوام تووی متغیر dataArr هربار دکمه ای انتخاب میشه آبجکت مورد نظر ذخیره بشه ولی قبلش یه Id اضافه بشه که وقتی یه دکمه چندبار انتخاب شد id آبجکت های یکسان متفاوت باشه ولی وقتی برای بار دوم و ... دکمه ای انتخاب میشه id آبجکت های قبلی هم تغییر میکنه مثل این می مونه که متغیر id تووی آبجکت های ذخیره است و به محض تغییر تووی آبجکتهای دیگه تغییر می کنه