title: What is the difference between updated hook and watchers in VueJS?
body: <p>I'm discovering VueJS and I don't understand exactly the differences between <code>updated</code> and watchers.</p>
  <h2>Updated hook</h2>
  <p>It is a lifecycle hook. According to <a href="https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram" rel="nofollow noreferrer">the official documentation</a>, it is triggered whenever data changes. So whenever a <code>prop</code> or a <code>data</code> is updated (the value, not only the pointer), <code>updated</code> is called.</p>
  <h2>Watchers</h2>
  <p>In the documentation, watchers are compared to computed properties. But in which cases would it be best to use updated instead of watchers ?</p>
  <p>It seems that in both cases, DOM is not updated when the callback is called (<code>nextTick()</code> is required if we want to manipulate the changes in the DOM). The only difference I see is that <code>watchers</code> are only triggered when one precise property (or data) is updated where <code>updated</code> is always called.</p>
  <p>I can't figure out what are the pros of updating whenever a data changes (<code>updating</code>) if we can be more accurate (<code>watchers</code>).</p>
  <p>Here are my thoughts.</p>
  <p>Thanks :)</p>