<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">I'm using a global error handler for process errors during component render function and watchers.</p>
<p dir="auto">But it does not catch the exception thrown in the list method below:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default {
  data() {
    return {
      key: null,
    };
  },
  watch: {
    async key() {
      await this.list();
    },
  },
  methods: {
    async list() {
      return axios.get('An invalid url');
    },
  },
};"><pre class="notranslate"><code class="notranslate">export default {
  data() {
    return {
      key: null,
    };
  },
  watch: {
    async key() {
      await this.list();
    },
  },
  methods: {
    async list() {
      return axios.get('An invalid url');
    },
  },
};
</code></pre></div>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">No need to change API</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.17-beta.0</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/w5d9gqmo/3/" rel="nofollow">https://jsfiddle.net/w5d9gqmo/3/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">In provided example:</p>
<ul dir="auto">
<li>open console</li>
<li>hit increment</li>
<li>observe computed value evaluations in console</li>
</ul>
<p dir="auto">In vue terms:</p>
<ul dir="auto">
<li>create dependency structure with many paths to the same watcher (A-&gt;B, B-&gt;C, A-&gt;C)</li>
<li>Notify leaf watcher about change (data change)</li>
<li>Observe too eager synchronous updates of watchers on every intermediate change</li>
</ul>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">All updated computed values are executed once and with correct dependant values.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="twoCounts evaluated to: {count: 2, countPlusOne: 3}"><pre class="notranslate"><code class="notranslate">twoCounts evaluated to: {count: 2, countPlusOne: 3}
</code></pre></div>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Computed values are executed multiple times with all intermediate dependency values.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="twoCounts evaluated to: {count: 2, countPlusOne: 2}
twoCounts evaluated to: {count: 2, countPlusOne: 3}"><pre class="notranslate"><code class="notranslate">twoCounts evaluated to: {count: 2, countPlusOne: 2}
twoCounts evaluated to: {count: 2, countPlusOne: 3}
</code></pre></div>
<hr>
<p dir="auto">The issue is clearly caused by this commit: <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/vuejs/vue/commit/653aac2c57d15f0e93a2c1cc7e6fad156658df19/hovercard" href="https://github.com/vuejs/vue/commit/653aac2c57d15f0e93a2c1cc7e6fad156658df19"><tt>653aac2</tt></a></p>
<p dir="auto">I did some debugging and found the cause.<br>
Dependencies are notified synchronously about the watcher update in the <code class="notranslate">notify</code> loop, but the updating watchers might be accessed too early with stale value and no information about necessary recomputation.</p>
<p dir="auto">I attempted a fix by splitting <code class="notranslate">Dep.notify</code> into two phases with separate loops for <code class="notranslate">dirtify</code> and <code class="notranslate">update</code>. It worked for simple situations where there is triangle of dependencies (<code class="notranslate">countPlusOne</code> in the example), but it stops working when the graph is any more complicated (paths are larger than 1). This is illustrated by <code class="notranslate">countPlusTwo</code> computed in the example.</p>
<p dir="auto">Possible full fix would involve either traversing the full dependency graph to <code class="notranslate">dirtify</code> all deep dependants first, or collecting the the array of <code class="notranslate">dependants of my dependants</code> like in previous implementation.</p>