index.html

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="main">
  <h1>Shopping cart</h1>
  <p>Apples: {{ products.apple }}</p>
  <p>Bananas: {{ products.banana }}</p>
  <p>Oranges: {{ products.orange }}</p>
</div>

<script>
  new Vue({
    el: "#main",
    data: {
      products: {
        apple: 0,
        banana: 0,
        orange: 0
      }
    },
    methods: {
      add: function(event) {
        this.products[event.data]++;
      }
    },
    beforeMount() {
      window.addEventListener("message", this.add);
    },
    beforeDestroy() {
      window.removeEventListener("message", this.add);
    }
  });
</script>