how to use setInterval in vue component

I define the timer in each my-progress, used to update the value of view, but the console shows the value of the constant changes, and the value of view is still not changed, how can I do in the timer to change the value of view

Vue.component('my-progress', {
    template: '\
			<div class="progress progress-bar-vertical" data-toggle="tooltip" data-placement="top">\
				<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{height: pgvalue}">{{pgvalue}}\
				</div>\
			</div>\
    	',
    data : function(){  
  
    	return {
    		pgvalue : '50%',
            intervalid1:'',
    	}
    },
    computed:{

        changes : {
            get : function(){
                return this.pgvalue;
            },
            set : function(v){
                this.pgvalue =  v;
            }
        }
    },
    mounted : function(){
      
    	this.todo()		
    },
    beforeDestroy () {
      
       clearInterval(this.intervalid1)
    },
    methods : {
             
    	todo : function(){    		
    		this.intervalid1 = setInterval(function(){
    			this.changes = ((Math.random() * 100).toFixed(2))+'%';
    			console.log (this.changes);
    		}, 3000);
    	}
    },
})

here is the link: jsbin.com/safolom

this is not pointing to the Vue. Try

todo: function(){    		
    this.intervalid1 = setInterval(function(){
	    this.changes = ((Math.random() * 100).toFixed(2))+'%';
		console.log (this.changes);
	}.bind(this), 3000);
}

or

todo: function(){  
    const self = this;  		
    this.intervalid1 = setInterval(function(){
	    self.changes = ((Math.random() * 100).toFixed(2))+'%';
		console.log (this.changes);
	}, 3000);
}

or

todo: function(){  
    this.intervalid1 = setInterval(() => {
	    this.changes = ((Math.random() * 100).toFixed(2))+'%';
		console.log (this.changes);
	}, 3000);
}

See How to access the correct this inside a callback?

check this example:

Vue.component('my-progress-bar',{
	template:
`<div class="progress">
	<div
		class="progress-bar"
		role="progressbar"
		:style="'width: ' + percent+'%;'"
		:aria-valuenow="percent"
		aria-valuemin="0"
		aria-valuemax="100">
		{{ percent }}%
	</div>
</div>`,
	props: { percent: {default: 0} }
});


new Vue({
	el: '#app',
	data: {p: 50},
	created: function() {
		var self = this;
		setInterval(function() {
        if (self.p<100) {
             self.p++;
         }
    }, 100);
	}
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div id='app'>
  <my-progress-bar :percent.sync='p'>
  </my-progress-bar>
  <hr>
  <button @click='p=0' class='btn btn-danger bt-lg btn-block'>
  Reset Bar Progress
  </button>
</div>