JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <div class="list" data-title="products">
    <div v-for="p in products">
      <button @click="$set(p, 'quantity', p.quantity || 1)" :disabled="cart.includes(p)">add to cart</button>
      {{ p.name }}, ${{p.price}}
    </div>
  </div>
  <div v-if="cart.length" class="list" data-title="cart">
    <div v-for="p in cart">
      <button @click="$delete(p, 'quantity')">del</button>
      {{ p.name }}
      <input v-model.number="p.quantity" type="number">
      ${{ p.price * p.quantity }}
    </div>
    total: ${{ total }}
  </div>
</div>

SCSS

* {
  font-family: monospace;
}

.list {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;

  &::before {
    content: attr(data-title);
    font-weight: bold;
    color: red;
  }
}

JavaScript

new Vue({
  el: '#app',
  data: {
    products: [...'abc'].map((n, i) => ({ name: n.repeat(3), id: i, price: 1 << i * 5 })),
  },
  computed: {
    cart() {
      return this.products.filter(n => 'quantity' in n);
    },
    total() {
      return this.cart.reduce((acc, n) => acc + n.price * n.quantity, 0);
    },
  },
});