title: Why is there a warning for Vue's provide and inject feature?
body: <p>I am thinking of using Vue's new provide/inject feature in a project, however in the official Vue <a href="https://v2.vuejs.org/v2/api/#provide-inject" rel="nofollow noreferrer">documentation</a> it gives this warning:</p>
  <blockquote>
  <p>provide and inject are primarily provided for advanced plugin / component library use cases. It is NOT recommended to use them in generic application code.</p>
  </blockquote>
  <p>However, the docs do not give a reason why.  What is the danger of using provide and inject in &quot;generic application code&quot; and not in &quot;advanced plugin / component library use cases&quot;?</p>
  <p>In the example code:</p>
  <pre><code>// parent component providing 'foo'
  var Provider = {
    provide: {
      foo: 'bar'
    },
    // ...
  }
  
  // child component injecting 'foo'
  var Child = {
    inject: ['foo'],
    created () {
      console.log(this.foo) // =&gt; &quot;bar&quot;
    }
    // ...
  }
  </code></pre>
  <p>The benefit as I understand it is that if you have multiple nested children components, you can skip passing props down each nested child and just &quot;receive&quot; the injected value directly in a grandchild component, for example.</p>
  <p>You can even make the injected value reactive if you bypass the default behavior of being non-reactive &quot;if you pass down an observed object,&quot; but here a warning would make sense to me since you'd have a reactive variable spanning across nested components, where data isn't supposed to get passed up that way, so tracking changes might get more confusing if reactive objects are used.</p>