用相同的值更改数组中的其他元素

<template>
  <el-row>
    <el-col :span="24">
      <el-image
        v-for="(card, index) in randomCards"
        :key="card.indexOf"
        :src="card.url"
        :id="(card.id = index)"
        fit="fill"
        @click="flipCards(index)"
      ></el-image>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      selectedCardsId: [],
      randomCards: null,
      data: [],
    };
  },
  computed: {},
  methods: {
    getResults() {
      axios
        .get("https://api.thecatapi.com/v1/images/search", {
          params: { limit: 36 },
        })
        .then((response) => {
          this.randomCards = response.data
            .concat(response.data)
            .sort(() => 0.5 - Math.random());
        });
    },
    flipCards(cardIndex) {
      this.randomCards[cardIndex].url = "1";
    },
  },
  async mounted() {
    await this.getResults();
  },
};
</script>

当我加载页面并单击图像时，我看到了数组中两个元素的变化，因为它们具有相同的值但具有不同的索引。我认为那是因为我推送了相同的数组。我也试过Array.from()和传播算子。