Vue.component('pricing', {

  template: '#pricing-row',

  props: ['item'],

  mounted() {
    this.addWatchers()
  },

  methods: {

      resetWatchers() {
        setTimeout(()=> {
            this.addWatchers()
        }, 700)
    },

    addWatchers() {

      this.updateNet = this.$watch(
        function() {
            return this.item.net
        },
        function() {
            // unmount other watchers
            this.updateMargin()
            this.updateSell()
            // calculate sell price and update
            this.setSellPrice()
            // re-add watchers
            this.resetWatchers()
        }
      ),

      this.updateMargin = this.$watch(
        function() {
            return this.item.margin
        },
        function() {
          // unmount other watchers which can cause bounce effect
          this.updateSell()
          // calculate sell price and update
          this.setSellPrice()
          // re-add watchers
          this.resetWatchers()
        }
      ),

      this.updateSell = this.$watch(
        function() {
            return this.item.sell
        },
        function(sellPrice) {
          // unmount other watchers which can cause bounce effect
          this.updateMargin()
          // update margin
          this.setMargin(sellPrice)
          // re-add watchers
          this.resetWatchers()
        }
      )
    },

    setSellPrice() {
      let price = (100 / (100 - this.item.margin)) * this.item.net
      this.item.sell = price.toFixed(2)
    },

    setMargin(sellPrice) {
      let profit = (sellPrice - this.item.net)
      let price = (100 * profit) / sellPrice
      this.item.margin = price.toFixed(2)
    }
  }

})

new Vue({
  el: '#vue',
  data: {
    prices: [
        {
        id: 1,
        net: 5,
        margin: 10,
        sell: 5.56
      },
        {
        id: 2,
        net: 7,
        margin: 10,
        sell: 7.78
      },
    ]
  }
})