<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">I use the following pattern to wait for a condition to hold:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const unwatch = this.$watch(function () {
  return this.queue.find((element) =&gt; element.shown === false);
}, function (newValue, oldValue) {
  if (!newValue) return;

  unwatch();

  // There is an element in the queue with shown === false.
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">unwatch</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">$watch</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">queue</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">element</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">element</span><span class="pl-kos">.</span><span class="pl-c1">shown</span> <span class="pl-c1">===</span> <span class="pl-c1">false</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">newValue</span><span class="pl-kos">,</span> <span class="pl-s1">oldValue</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">newValue</span><span class="pl-kos">)</span> <span class="pl-k">return</span><span class="pl-kos">;</span>

  <span class="pl-s1">unwatch</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-c">// There is an element in the queue with shown === false.</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The problem is that this pattern is not possible to use if I also want callback to be called if the condition holds already when <code class="notranslate">$watch</code> is called. This is done by setting <code class="notranslate">immediate</code> to <code class="notranslate">true</code>. But then <code class="notranslate">unwatch</code> is not yet set because <code class="notranslate">$watch</code> has not returned.</p>
<p dir="auto">I could be checking if the condition holds before creating <code class="notranslate">$watch</code> but this makes the code more complicated and in parts duplicated.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">In Meteor's Tracker this is solved by providing access to current computation as an argument to the callback function. Maybe Vue could do the same and provide <code class="notranslate">unwatch</code> as the third argument to the callback <code class="notranslate">(newValue, oldValue, unwatch)</code>.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.7</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/misq007/a5wth0rf/39/" rel="nofollow">https://jsfiddle.net/misq007/a5wth0rf/39/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">the error will popup</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Provide/Inject to work properly for the first level component in the same way as it is working when nested.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Injection "mode" not found</p>