How does a reactive property work? When you add a reactive property, Lit adds accessors for that property. When you set the property, Lit checks to see if the property has changed. If the property has changed, Lit starts an update cycle. The update cycle is asynchronous, so that updating several properties in the course of a single event handler, for example, only triggers a single update.

By default, Lit uses a strict inequality check (!==) to determine whether a property has changed. If you mutate an existing object or array, Lit won't detect a change. Try clicking the "x" button next to one of the list items in the preview pane. You'll notice the list doesn't update.

Lit's default equality check works great when using immutable data patterns. For example:

this.array = [...this.array, newThing]
this.obj = {...this.obj, id: ++this.obj.id}

To use this approach in the current component, replace the existing splice() call with the following code:

    this.groceries =
        this.groceries.filter((_, i) => i !== indexToRemove);

This creates a new array containing all of the members from the first array, except for the one you want to remove. Since groceries is now a new array, the change triggers an update.

For more information, see Mutating object and array properties.