v-for rendering again

[halivert]

I have this pen, where I create a list with a v-for, but when I update the list (remove an element clicking on it), then the next elements render again i.e. if you click the 5, then the 6, 7, and so on, are re-rendered

<ul v-scope>
	<li v-for="item in items" :key="item" class="animation" @click="remove(item)">
		{{ item }}
	</li>
</ul>

import { createApp } from "https://cdn.skypack.dev/petite-vue@0.4.1";

createApp({
	items: Array.from({ length: 10 }, (_, i) => i + 1),
	remove(item) {
		this.items = this.items.filter((i) => i !== item);
	}
}).mount("ul");

.animation {
	animation: fade-in 1s forwards;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

Am I doing something wrong?
I have setted the keys for the elements in the v-for