Unexpected behaviour with vaadin-checkbox in html-templates

I observed an unexpected behaviour with vaadin-checkbox in html-templates.

The behaviour exists in this tutorial too: https://vaadin.com/learn/tutorials/lit-element

It goes like this:

Generate multiple vaadin-checkboxes in a template.

Every checkbox has a change listener which triggers a filter.

When you mark the checkbox the filter filters the underlying element out.

The change of the property triggers the render-function being called.

The effect:

If you had 3 elements you now see the expected 2 but the checkbox that got the place of the just removed checkbox is checked despite the underlying property says otherwise.

Is this a bug?

I cut the example from the tutorial down to the problem in this stackblitz-page:


import {LitElement, html} from 'lit-element';
import '@vaadin/vaadin-checkbox';

class MyElement extends LitElement {
    static get properties() {
        return {
            todos: {type: Array},

    constructor() {
        this.todos = [
                task: "1",
                complete: false
                task: "2",
                complete: false
                task: "3",
                complete: false

    render() {
        return html`
                todo => html`
                  @change="${e => this.updateTodoStatus(todo, e.target.checked)}"

    updateTodoStatus(updatedTodo, complete) {
        this.todos = this.todos.map(todo =>
            updatedTodo === todo ? {...updatedTodo, complete} : todo

    applyFilter(todos) {
        return todos.filter(todo => !todo.complete);

customElements.define('my-element', MyElement);