Progressbar using vuejs

<!DOCTYPE html>
<html>
  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container" id="progressbar">
      <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100" :style="{'width': `${progress}%`}">
          {{ progress }}%
        </div>
      </div>
      <div v-if="completed">
        <button class="btn" @click="restart">Restart!</button>
      </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="script.js"></script>
  </body>
</html>

// Code goes here
new Vue({
	el: '#progressbar',
  data: { 
  	progress: 0,
    completed: false,
    tempo: 50,
  },
  created: function() {
  	this.timer(this.tempo)
  },
    methods: {
  	timer: function(tempo) {
    	let vm = this;
    	let setIntervalRef = setInterval(function() {
      	vm.progress++;
        if (vm.progress == 100) {
        	clearInterval(setIntervalRef);
        	vm.completed = true;
				}
      }, tempo);
    },
    restart: function() {
    	this.completed = false;
      this.progress = 0;
      this.timer(this.tempo);
    }
  }
});

/* Styles go here */
html {
  margin: 15px;
}