How to track the change of the main object?

Question

JavaScript

Hello.
I have an array of objects:

products: [
{id: 1, name: 'prod 1'},
{id: 2, name: 'prod 2'},
{id: 3, name: 'prod 3'},
]

There is a 2nd object that includes all products (and should have all products entries):

order: {
  id: 1,
  date: '2019',
  products: [
   {product_id: 1, count: 3},
   {product_id: 2, count: 5},
   {product_id: 3, count: 0},
  ]
}

I form it like this:

let orderProducts = products.map(product => {
       return {
            product_id: product.id,
            count: productCount(product)
        }
})

and add to the order object.
Problem: adding, deleting products orderProducts is old, what is the best way to update it?
Hang watch on products, then send some kind of global event?

Answer 1

Can be obtained through computed or through getters (if using vuex)

computed: {
    orderWithProducts() {
      const order = this.order;
      return {
        ...order,
        products: this.products.map(product => ({
          product_id: product.id,
          count: productCount(product)
        }))
      };
    },
}