Custom elements reconstructed on sort

app.html

<template>
  
  <require from="./card"></require>
  
  <button click.delegate="sortByName()">Sort alphabetically by name</button>
  <button click.delegate="sortByOldest()">Sort by oldest</button>

  <card repeat.for="person of people" model.bind="person"></card>

</template>

app.ts

export class App {
  people = [
    {
      name: "Bob",
      age: 33
    },
    {
      name: "Steve",
      age: 22
    },
    {
      name: "John",
      age: 45
    }
  ]

  sortByName() {
    this.people.sort((cardA, cardB) => {
			if (cardA.name < cardB.name) {
				return -1;
			} else if (cardA.name > cardB.name) {
				return 1;
			}
			return 0;
		})
  }

  sortByOldest() {
    this.people.sort((cardA, cardB) => {
			if (cardA.age < cardB.age) {
				return 1;
			} else if (cardA.age > cardB.age) {
				return -1;
			}
			return 0;
		})
  }

card.css

card {
  display: block;
}

card.html

<template style.bind="styleString">
  
	<require from="card.css"></require>
	
  <h1>${model.name}</h1>
	<div>${model.age}</div>
	<button click.delegate="makeCardRed()">Make Card Red</button>

</template>

card.ts

import { bindable } from "aurelia-framework";

export class Card {
	@bindable model;

	styleString = "";

	makeCardRed() {
		this.styleString = "background-color: red;";
	}
}