title: When is a prop defined, equal to what was passed to the component?
body: <p>I have some unreliable behaviour of my component to which a <code>prop</code> is passed that I want to debug:</p>
  <pre><code>&lt;my-component :number=&quot;someNumber&quot; /&gt;
  </code></pre>
  <p><code>number</code> is made available in <code>my-component</code> via a standard <code>prop: [&quot;number&quot;]</code> declaration.</p>
  <p><strong>My question</strong>: at which point of the reactivity cycle is <code>number</code> defined to the value of <code>someNumber</code> in the parent?</p>
  <p>Specifically, I need to make some actions when <code>number</code> has the correct value (I assume that it is <code>undefined</code> before that). I can do that in:</p>
  <ul>
  <li><code>created()</code>,</li>
  <li><code>mounted()</code>,</li>
  <li>or by watching <code>number</code></li>
  </ul>
  <p>Which is the correct approach? (i.e. the one where <code>number</code> has the value that is passed to the component).</p>
  <hr />
  <p>My current findings are that:</p>
  <ul>
  <li>on the first use of a component <code>watch</code> is OK, in <code>mounted()</code> the value is <code>undefined</code></li>
  <li>on subsequent uses of the component, <code>watch</code> does not trigger (when the same value is passed), but <code>mounted()</code> now has the proper value.</li>
  </ul>
  <p>So my workaround will be to use both (with some checks against <code>undefined</code>) but it looks really shaky.</p>