title: Using CountUp in Vue
body: <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>