How to properly update nested object?

Question

JavaScript

Hello.
vuex has an object:

store: {
      product: {
          name: 'Product',
          options: {
              isFree: false,
              delivery: true
          }
      }
   }

there is a mutation to update:

updateProduct(state, {product, data}) {
    Object.assign(product, data)
}

Then I update one option:

const product = this.product

this.$store.commit('updateProduct', {
   product,
   data: {
      options: {
         isFree: true,
      }
   }
}

Problem: The rest of the options are removed from the object.

Answer 1

Pass not the entire object to the mutation, but only the part of it that you are going to update:

this.$store.commit('updateProduct', {
  product: product.options,
  data: {
    isFree: true,
  },
});

Otherwise, you must recursively merge the properties of the objects. If you are not ready to implement this yourself, take the finished one .

Answer 2

Isn't it possible to write a mutation to change an option and call it when needed?