Altering an object property in array doesn't save to localstorage and template isn't updated.

[TJRklaassen]

I'm using Polymer 3. I'm not sure if this is a bug, or if I'm doing something wrong. When I alter an object property that's inside an array, console.log(this.products); shows me that the property has correctly been altered. However, when I check the localstorage, the property is still the same and the <template is="dom-repeat"> doesn't refresh either. I use <app-localstorage-document> to save the array locally, which works fine.

The code for displaying the array using <template is="dom-repeat">:

<template is="dom-repeat" items="{{products}}" as="product">
  <paper-card>
    <div>
      Product [[product.number]]: [[product.status]]
      <paper-button on-click="setOut">Out of stock</paper-button>
    </div>
  </paper-card>
</template>

And here is the code where the function from the paper-button is called:

setOut(e) {
  var item = e.model.product;

  for(const product of this.products){
    if(product.number === item.number){
      product.status = "out of stock";
    }
  }
  console.log(this.products);
}

Deleting and adding objects from/to the array works fine. Template updates and localstorage shows the right objects as well. So the rest of my code works.

[TJRklaassen]

Never mind, I just found out about the this.set function.