如何根据不断变化的道具渲染 v-for？

Question

Maybe I have a missconcept based on React.js, but I am working wih Vue.js

I Just create a component:

<ResultCards v-bind:cards="cards"/>

cards is updated when an event is triggered by other component:

  methods: {
    fillResultCards(cards){
      this.cards = cards;
    }
  }

This is my ResultCard Component

<template>
  <div>
    <v-card
      v-for="card in cards"
      v-bind:key="card.id"
    >
     // ..card detail here
    </v-card>
  </div>

</template>

<script>
  export default {
    name: 'ResultCards.vue',
    props: {
      cards: Array,
    },
  };
</script>

But when I update the "cards" props send me the message:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "cards"

I tried to copy cards prop to a internal dat

  data() {
    return { internalCards: this.cards };
  }

but it doesn't works.

Answer 1

Okay, it works, maibe I had a typo, but this is the FULL flow.

I have external Component (a search bar)

<SearchGit v-on:item-selected="fillResultCards"/>

when search concept fill the input, it emit the event item-selected passing results (from API) as args. this.$emit('item-selected', this.cache.filter(item => item.full_name === textSearch));

In Container I set my data with the function

  data: () => ({
    cards: [],
  }),
  methods: {
    fillResultCards(cards){
      this.cards = cards;
    }
  }

then this "new version" of cards pass as prop to the render component

<ResultCards v-bind:cards="cards"/>

And the render component only need to render data, and thats all:

 <v-card
      v-for="card in cards"
      v-bind:key="card.id"
    >
      <v-list-item three-line>
        <v-list-item-content>
          <div class="overline mb-4">{{ card.name }}</div>
          <v-list-item-title class="headline mb-1">{{
            card.full_name
          }}</v-list-item-title>
          <v-list-item-subtitle>{{ card.description }}</v-list-item-subtitle>
        </v-list-item-content>

        <v-list-item-avatar tile size="80" color="grey">
          <img v-bind:src="card.owner.avatar_url" alt="avatar" />
        </v-list-item-avatar>
      </v-list-item>
    </v-card>

I don't change any of the code, but maybe a cache or something keeps old changes, it works now.