"$http" does not exist - TypeScript compiler error with Vuejs2 and vue-resource

Question

I am writing a Vue app using typescript using vue-property-decorator (an extension of vue-class-component). I am using vue-resource but get a compiler error when using this.$http:

"Property '$http' does not exist on type ...."

I saw a very similar issue posted at How to use plugins like vue-resource when using Vue.js with Typescript?

I have already been importing vue-resource using import VueResource from 'vue-resource' syntax - so this solution is not working for me.

Here is my main.ts

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import store from './store/store'
import routes from './routes'

import moment from 'moment'

Vue.use(VueResource)
Vue.use(VueRouter)

Vue.filter('formatTime', function(ms) {
  const zeroTime = moment('2016-06-12 00:00:00')

  if (ms > 3600000) {
    return zeroTime.add(ms, 'milliseconds').format('HH:mm:ss:SSS')
  } else if (ms > 60000) {
    return zeroTime.add(ms, 'milliseconds').format('mm:ss:SSS')
  } else if (ms > 1000) {
    return zeroTime.add(ms, 'milliseconds').format('ss:SSS')
  } else {
    return zeroTime.add(ms, 'milliseconds').format('SSS')
  }
})

Vue.filter('dateFormat', (date, format) => {
  return moment(date).format(format || 'MMMM Do, YYYY - HH:mm:ss')
})

const router = new VueRouter({ routes })

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

And I get the error in this file (in the created() method):

import { Vue, Component } from 'vue-property-decorator'

import WordTyper from 'components/wordTyper'
import Race from 'components/Race.vue'
import Stats from 'components/stats'
import SpeedGraph from 'components/speedGraph'
import SaveScore from 'components/saveScoreModal'

@Component({
  name: 'SinglePlayer',
  components: {
    WordTyper,
    Race,
    Stats,
    SpeedGraph,
    SaveScore
  }
})
export default class SinglePlayer extends Vue {
  loading: boolean = false
  saveScore: boolean = false

  get playing() {
      return this.$store.getters.timeElapsed
    }

  get finished() {
      return this.$store.getters.finished
    }

  created() {
    this.$store.dispatch('reset')

    const url = 'https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en'

    this.loading = true

    this.$http.get(url).then((res) => {
      if (!res.body) {
        this.loading = false
        return
      } else {
        const text = res.body.quoteText.trim()
        const source = res.body.quoteAuthor

        this.$store.dispatch('reset', { text, source })
        this.loading = false
      }
    }, (err) => {
      this.loading = false
    })
  }

  save() {
    this.$router.push('scores')
  }
}

Of course, the app is working fine as intended but this compiler error still persists.

Any insight would be very appreciated, thanks!