Vue warn data() should return an object

Question

Anyone has idea of this error or can see if anything wrong with my syntax that is causing this warning?

TheResources is the parent and StoredResources.vue & LearningResource.vue are childs.

data() should return an object. at <LearningResource key="official-guide" id="official-guide" title="Official Guide"  ... > 
  at <StoredResources> 
  at <KeepAlive> 
  at <TheResources> 
  at <App>

TheResources.vue

<template>
    <keep-alive>
            <component :is="selectedTab"></component>
    </keep-alive>
</template>

data() {
        return {
            selectedTab: 'stored-resources',
            storedResources: [
                {
                    id: 'official-guide',
                    title: 'Official Guide',
                    description: 'The official Vue.js documentation.',
                    link: 'https://vuejs.org'
                },
                {
                    id: 'google',
                    title: 'Google',
                    description: 'Learn to Google...',
                    link: 'https://google.org'
                }
            ],
        };
    },

StoredResources.vue

<template>
    <ul>
        <learning-resource
            v-for="res in resources" 
            :key="res.id" 
            :id="res.id"
            :title="res.title"
            :description="res.description"
            :link="res.link"
        ></learning-resource>
    </ul>
</template>

LearningResource.vue

<template>
    <li>
        <base-card>
            <header>
                <h3>{{ title }}</h3>
                <base-button mode="flat" @click="removeResource(id)">Delete</base-button>
            </header>
            <p>{{ description }}</p>
            <nav>
                <a :href="link">View Resource</a>
            </nav>
        </base-card>
    </li>
</template>

<script>
export default {
    props: [
        'id',
        'title',
        'description',
        'link'
    ],
    inject: ['removeResource'],
    data() {
        
    },
}
</script>

Couldn't figure out where went wrong. So help is much appreciated. Thanks!

Answer 1

It is written here that

The data option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as $data

So, try this in LearningResource.vue

data() {
   return {};        
},