Vue.component('progress-bar', { props: ['value', 'max', 'percentagePosition'], data: function () { return { complete: false, percentageValue: 0 }; }, watch: { value: function(){ this.percentageValue = this.calculatePercentage(); }, max: function () { this.percentageValue = this.calculatePercentage(); } }, template: '<div class="progress-bar" :class="[complete ? \'complete\': \'\']">' + ' <div class="progress" :style="{ width: percentageValue + \'%\'}"></div>' + ' <div class="progress-bar-percentage" :class="percentagePosition"> {{ percentageValue }}%</div>' + '</div>', mounted: function () { this.percentageValue = this.calculatePercentage(); }, updated: function () { this.percentageValue = this.calculatePercentage(); if (this.percentageValue !== 100) { this.complete = false; } }, methods: { calculatePercentage: function () { if (!Number.isInteger(this.value) || !Number.isInteger(this.max)) { return 0; } var percentage = Math.round((100 * this.value) / this.max); if (percentage === 100) { this.complete = true; } return percentage; } } });