控制台日志中的数组元素是正确的，但未呈现正确

Question

I am trying to separate components into arrays of selected, and not selected, in order to campare the former ones. But when the first item of the array is selected, it is copied, instead of added, to the other array - at least on the screen. But in the console log, the arrays are as they should be.

I found this error when while debugging, but i don't know how to solve this problem.

Exception: Error: : Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '' at Cards.get data [as data] at Cards.invokeGetter (:1:142) at flush

this is the repl of the problem

<section class="_residencial_cards">
{#if compareList.length > 0}
  <div class="test">
    <h1>comparar</h1>
    {#each compareList as item}
        <Card card={item} on:mark={changeList(item)}/>
    {/each}
  </div>
{/if}
{#each initialCards.filter(c => c.compare === false) as card}
    <Card {card} on:mark={changeList(card)}/>
{/each}
</section>

This is the function to divide into arrays :

function changeList(card) {
 compareList = [...compareList, card]
 card.compare = true
 initialCards = initialCards.filter(t => t !== card)
}

The component card:

<label for="{frontprops.name}">Compare</label>
<input type="checkbox" id='{frontprops.name}' name="" on:change={change} >

And its dispach code:

function change(event) {
  check = event.target.checked
  dispatch('mark', {
    bool: check
  })
}

This is the console.log:

Answer 1

The problem was the key in the each loop:

{#each initialCards.filter(c => c.compare === false) as card}
   <Card {card} on:mark={changeList(card)}/>
{/each}

It should be:

{#each initialCards.filter(c => c.compare === false) as card,i (card.compare)}
  <Card {card} on:mark={changeList(card.compare)}/>
{/each}

and then alter the function accordingly.