javascript - Using CountUp in Vue -

i'll start saying i'm new vue. completed 1 project following tutorial , first 1 i've done on own far.

i building simple page show score between 2 teams. score being pulled api , polling every 5 seconds , setting score variable each team score retrieved each time api.

i'd animate count new score, , little lost how this.

i found countup.js looks good, problem updating vue variable , not element , have no clue how this.

it looks there implementation vue having never used npm don't know doing.

here app.js file contains vue code:

var vm = new vue({      el: '#livecounter',     data: {          teama: 0,         teamb: 0     },     methods: {         loaddata: function() {             this.$http.get('https://dummyapi.com/getscore)').then(function (response) {                 this.teama = response.body.teama.summary.score;                 this.teamb = response.body.teamb.summary.score;                 console.log('polled');             }, function(response) {                 //nothing             });         },     },      mounted: function () {         this.loaddata();          setinterval(function () {           this.loaddata();         }.bind(this), 5000);     } }); 

can please me implement count feature?

there few things need use vue-countup.

first install using following command in code directory:

npm install --save vue-countup 

this install , create dependency entry in package.json.

now have tell vue, going use npm library can using following(probably in app.js or have imported vue):

vue.use(window.vuecountup); 

after 2 steps can go ahead , use following in template:

<vuecountup class="mycounter" :end="teamb" :duration="2.5" :options="{useeasing : true,             usegrouping : true,             separator : ',',             decimal : '.',             prefix : '',             suffix : ''}"></vuecountup>