Невозможно реализовать observableArray в таблице html

Question

Я могу написать функцию для распечатки массива joinned. Но при этом у меня будет несколько раз, когда я обновляю количество в корзине. Таким образом, я попытался использовать реализацию knockout. js observableArray для автоматического обновления sh данных в таблице, но безуспешно. Что-нибудь, что я пропускаю?

const products = [{
    id: 5,
    productName: "Logitech Mouse",
    unitprice: 35
  },
  {
    id: 6,
    productName: "Logitech Keyboard",
    unitprice: 40
  }
];
let htmlProducts = '';

products.forEach(function(product) {
  htmlProducts = htmlProducts + `<div style="border: 1px solid red">\
                <h2>${product.productName}</h2>
                <p>RM ${product.unitprice.toFixed(2)}</p>
                <p><button class=AddToCart data-id="${product.id}">Add to Cart</button></p>\
                </div>`;
})

document.getElementById("productRow").innerHTML = htmlProducts;

function createUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0,
      v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

function cart(productId, quantity) {
  this.id = createUUID();
  this.productId = parseInt(productId);
  this.quantity = quantity;
}

const addToCart = document.getElementsByClassName("AddToCart");

var carts = [];
var joined = [];

[...addToCart].forEach(function(element) {
  element.addEventListener("click", function() {

    const foundIndex = carts.findIndex(
      prod => prod.productId == element.dataset.id
    )

    if (foundIndex === -1) {
      carts.push(new cart(element.dataset.id, 1));
    } else {
      carts[foundIndex].quantity = carts[foundIndex].quantity + 1;
    }

    joined = carts.map(item => {
      let {
        unitprice,
        ...rest
      } = products.find(p => p.id === item.productId);
      debugger
      return {
        'cartId': item.id,
        'unitprice': unitprice,
        'quantity': item.quantity,
        'total': unitprice * item.quantity,
        ...rest
      };
    });

    console.log(joined);

  });

});

function VM() {
  debugger
  this.TableData = ko.computed(function() {
    var data = ko.unwrap(joined)
    var res = ko.observableArray();
    debugger
    for (var i in data) {
      var obj = data[i];
      res.push({
        name: obj.productName,
        price: obj.unitprice
      });
    }

    return res;
  }, this);
}

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div id="productRow"></div>
<div id="cartContainer"></div>

<table>
    <thead>
        <tr>
            <td>Product Name</td>
            <td>Price</td>
        </tr>
    </thead>

    <tbody data-bind="foreach: TableData()">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: price"></td>
        </tr>
    </tbody>
</table>

Или какую-нибудь ссылку или образец показать?