Неправильная логика работы computed set() в vue.js

Есть следующий блок:

<div id="block">
      <label for="test_price">Цена</label>
    <input type="text" name="price" id="test_price" v-model="price">
      <label for="test_saleprice">Цена со скидкой</label>
    <input type="text" name="saleprice" id="test_saleprice" v-model="saleprice">
      <label for="test_discountprice">Процент скидки</label>
    <input type="text" name="discountpercent" id="test_discountprice" v-model="salePercent">
</div>

Есть js:

new Vue({
    el: '#block',
    data: {
        price: 0,
        saleprice: 0,
        discountpercent: 0
    },
    computed: {
        salePercent: {
            get: function() {
                var price = parseInt(this.price);
                var saleprice = parseInt(this.saleprice)
                var percent = price/100;        
                var total = saleprice/percent;  
                total = 100 - total;        
                if (!isNaN(total)) return parseInt(total);
                return 0;
            }, 
            set: function(percents){
                var saleprice = parseInt(percents);
                var price = parseInt(this.price);
                var discount = price/saleprice;
                var total = price - discount;
                this.saleprice = total;
                return true;
            }               
        }
    }

});

Codepen: https://codepen.io/Alexxosipov/pen/aVEXyp

Логика работы такая: указывается цена. Затем указывается либо цена со скидкой (get), после чего через computed salePercent вычисляется % скидки, либо указывается процент (set), после чего должна указываться цена со скидкой. Вопрос: что я сделал не так, почему сеттер работает неправильно? Описать сложно поведение, поэтому добавил codepen.

И да, еще вопрос: в коде постоянно повторяется parseInt(this.price). Возможно ли задать в data.price каким-либо образом строгую типизацию (int) (его подобие в js)? Заранее спасибо!