Intersection Observer doesn't observe new elements - vue.js

Question

I need to observe elements in list and mark them as read when they appear in the user's viewport. But when I add new elements in the beginning of the array (unshift), observer doesn't work :(
I use Vue, but I know that the problem does not correlate with it.
Here is observer method, which don't fire for new elements:
onElementObserved(entries) {
entries.forEach(({ target, isIntersecting}) => {
if (!isIntersecting) {
return;
}
this.observer.unobserve(target);
setTimeout(() => {
const i = target.getAttribute("data-index");
this.todos[i].seen = true;
}, 1000)
});
}
codepen

Answer 1

The v-for items have no key specified, so Vue tracks each list element by index. When a new item is unshifted into the list, the new element will have an index of 0, which already exists in the list, so the existing element is simply patched in place. Since no new element is created, the Intersection Observer is not triggered.
To resolve the issue, set a unique key per item in v-for. For example, you could add an id property to each array element, and then bind that id as the key for <todo>:
let nextId = 0;👈
const TodoList = Vue.extend({
template: `
<div>
<ul class="TodoList">
<todo
v-for="(todo, i) in todos"
:todo="todo"
:observer="observer"
:index="i"
:key="todo.id"👈
></todo>
</ul>
<button #click="pushNewTodo()">PUSH NEW</button>
</div>
`,
data() {
return {
todos: [ 👇
{ id: nextId++, seen: false, text: "Add app skeleton" },
{ id: nextId++, seen: false, text: "Add to-do component" },
{ id: nextId++, seen: false, text: "Add to-do list component" },
{ id: nextId++, seen: false, text: "Style the components" },
{ id: nextId++, seen: false, text: "Add the IntersectionObserver" },
{ id: nextId++, seen: false, text: "Mark to-do's as seen" }
],
};
},
methods: {
pushNewTodo() { 👇
this.todos.unshift({ id: nextId++, seen: false, text: "Add app skeleton BLAH BLAH BLAH" })
},
}
})
updated codepen