title: Vue warn data() should return an object
body: <p>Anyone has idea of this error or can see if anything wrong with my syntax that is causing this warning?</p>
  <p><strong>TheResources</strong> is the parent and <strong>StoredResources.vue</strong> &amp; <strong>LearningResource.vue</strong> are childs.</p>
  <pre><code>data() should return an object. at &lt;LearningResource key=&quot;official-guide&quot; id=&quot;official-guide&quot; title=&quot;Official Guide&quot;  ... &gt; 
    at &lt;StoredResources&gt; 
    at &lt;KeepAlive&gt; 
    at &lt;TheResources&gt; 
    at &lt;App&gt;
  </code></pre>
  <p><strong>TheResources.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;keep-alive&gt;
              &lt;component :is=&quot;selectedTab&quot;&gt;&lt;/component&gt;
      &lt;/keep-alive&gt;
  &lt;/template&gt;
  
  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'
                  }
              ],
          };
      },
  </code></pre>
  <p><strong>StoredResources.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;ul&gt;
          &lt;learning-resource
              v-for=&quot;res in resources&quot; 
              :key=&quot;res.id&quot; 
              :id=&quot;res.id&quot;
              :title=&quot;res.title&quot;
              :description=&quot;res.description&quot;
              :link=&quot;res.link&quot;
          &gt;&lt;/learning-resource&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>LearningResource.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;li&gt;
          &lt;base-card&gt;
              &lt;header&gt;
                  &lt;h3&gt;{{ title }}&lt;/h3&gt;
                  &lt;base-button mode=&quot;flat&quot; @click=&quot;removeResource(id)&quot;&gt;Delete&lt;/base-button&gt;
              &lt;/header&gt;
              &lt;p&gt;{{ description }}&lt;/p&gt;
              &lt;nav&gt;
                  &lt;a :href=&quot;link&quot;&gt;View Resource&lt;/a&gt;
              &lt;/nav&gt;
          &lt;/base-card&gt;
      &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: [
          'id',
          'title',
          'description',
          'link'
      ],
      inject: ['removeResource'],
      data() {
          
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>Couldn't figure out where went wrong. So help is much appreciated. Thanks!</p>