Using CountUp in Vue
<p>I'll start by saying I'm really new to Vue. I completed one project following a tutorial and this is the first one I've done on my own so far.</p>

<p>I am building a simple page to show the score between two teams. The score is being pulled from an API and I am polling this every 5 seconds and then setting the score variable for each team to the score retrieved each time from the API.</p>

<p>I'd like to animate this to count up to the new score, and am just a little lost as to how to do this. </p>

<p>I found <a href="https://github.com/inorganik/countUp.js/" rel="nofollow noreferrer">countUp.js</a> which looks really good, but the problem is I am updating a Vue variable and not an element and so I have no clue how to do this.</p>

<p>It looks like there is an <a href="https://www.npmjs.com/package/vue-countup" rel="nofollow noreferrer">implementation for Vue</a> but having never used npm I don't know what I am doing.</p>

<p>Here is my <code>app.js</code> file which contains my Vue code:</p>

<pre><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);
    }
});
</code></pre>

<p>Can someone please help me implement a count up feature?</p>