title: Data not injected from parent to child using provide/inject in VueJS
body: <p>I am trying to inject data from parent to child elements using provide and inject but the data is not available in the child element. I added the same data within the component (commented), if uncommented it's visible but not the data injected.</p>
  <p><strong>Hello</strong> is being printed but not the passed data</p>
  <p>TheResource.vue ---- parent</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;base-card&gt;
              &lt;base-button @click.native=&quot;setSelectedTab('stored-resources')&quot;&gt;Stored Resources&lt;/base-button&gt;
              &lt;base-button @click.native=&quot;setSelectedTab('add-resource')&quot;&gt;Add Resource&lt;/base-button&gt;
          &lt;/base-card&gt;
          &lt;component :is=&quot;selectedTab&quot;&gt;&lt;/component&gt;       
      &lt;/div&gt;
  
  &lt;/template&gt;
  &lt;script&gt;
  import StoredResources from './StoredResources';
  import AddResource from './AddResource';
  export default {
      components:{
          StoredResources,
          AddResource
      },
      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'
                  }
              ]
          };
      }, 
      provide:{
          resources: this.storedResources
      },
      methods: {
          setSelectedTab(tab){
              console.log('Clicked')
              this.selectedTab = tab;
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>StoredResource.vue --- child</p>
  <pre><code>&lt;template&gt;
  
      &lt;ul&gt;
          &lt;learning-resources v-for=&quot;res in resources&quot; 
              :key=&quot;res.id&quot; 
              :title=&quot;res.title&quot; 
              :description=&quot;res.description&quot;
              :link=&quot;res.link&quot;&gt;&lt;/learning-resources&gt;
          &lt;h1&gt;Hello&lt;/h1&gt;
    &lt;/ul&gt;
    
  &lt;/template&gt;
  &lt;script&gt;
  import LearningResources from './LearningResources';
  
  export default {
     
      inject: ['resources'],
      //   data(){
      //     return{
             
      //         resources: [
      //             { 
      //                 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'
      //             }
      //         ]
      //     };
      // },
      components:{
          LearningResources
      }
  }
  &lt;/script&gt;
  &lt;style scoped&gt;
      ul{
          list-style: none;
          margin: 0;
          padding: 0;
          margin: auto;
          max-width: 40rem;
      }
  &lt;/style&gt;
  </code></pre>