[Vuejs]-Increase image width base on likes and show the current Prozent

new Vue({
  el: "#app",
  data: {
    likes:0,
    width:0,
    initialWidth: 0,
    step: 0.025,
    imageUrls: ['https://i.postimg.cc/gn2d9BpV/blue.png', 'https://i.postimg.cc/3kyTN4dW/green.png', 'https://i.postimg.cc/0bXv9d5L/purple.png', 'https://i.postimg.cc/TKZXDdD0/yellow.png'],
    currentImageIndex: 0,
    smallestWidth: 7.5
  },
  methods: {
  	getCurrentIndex() {
    	if (!this.likes || this.likes <= 1000) {
      	this.step = (25-this.smallestWidth)/1000;
        this.initialWidth = this.smallestWidth;
      	return 0;
      }
     
      
   	if (this.likes <= 10000) {
    		this.step = 25/10000;
        this.initialWidth = 25;
      	return 1;
      }
      
		if (this.likes < 1000000) {
        this.step = 25/999999;
        this.initialWidth = 50;
      	return 2;
      }
      
      this.step = 0;
      this.initialWidth = 100;
      return 3;
    },
  	prozent(){
		let likes = this.likes;
    
  this.currentImageIndex = this.getCurrentIndex();
  this.width = this.initialWidth + likes*this.step;
  
  	if (this.likes == 0) {
    	return 0;
    }
    
    return this.width.toFixed(2);
  }             
 },

})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<div id="app">
  likes
  <input v-model="likes" type="text"> 
  <br>
 <br>
 <div style="text-align:center">
 
  <img :src="imageUrls[currentImageIndex]" :style="{width: width + '%'}" >  
  
  <br>
  <br>
 
  {{ likes == 0 ? 0 : width }} %
  <br>
  
    {{ prozent() }}
    </div>
  <br><br>
</div>


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