Ресурс VueJS выдает неопределенную ошибку в точном коде, как и в другом проекте

Я изучаю VueJS, и мне это нравится! но за последние 2 дня я застрял на странной проблеме. Я сделал предыдущий проект, и там точно такой же код работает. В моем новом проекте (учебном проекте) идентичный код НЕ работает.

Это приводит к этой ошибке:

Мой код выглядит следующим образом (все работает отлично, кроме ресурса): Main.js

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

Vue.config.productionTip = false
Vue.use(VueResource);

Vue.http.options.root = 'https://myapi.com/v1/list/';
Vue.http.interceptors.push((resource, next) => {
    this.method = 'GET';
    next();
});

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

Код Home.vue:

<template>
    <div>
        <StatsRowOne></StatsRowOne>
        <button class="btn btn-primary" v-on:click="submit">search</button>
    </div>
</template>

<script>
    import StatsRowOne from './elements/StatsRowOne';

    export default {
        data(){
            return {
                results: [],
                resource: {}
            }
        },
        components: {
            StatsRowOne: StatsRowOne
        },
        methods: {
            submit() {

                this.resource.get().then(function(response) {
                    alert('done');
                });

            }
        },
        created() {
            this.resource = this.$resource('auto');
        }
    }
</script>

<style lang="scss" scoped>

</style>