title: Can a prop be reactive?
body: <p>I am writing a component which receives data via a <code>prop</code>, modifies that data, and then <code>$emit</code> it back to the parent (upon its change, so it is also in <code>watched</code>).</p>
  
  <p><strong>Can a <code>prop</code> be reactive?</strong> Or, alternatively, how to assign a prop to a reactive property?</p>
  
  <p>I tried to avoid this question by:</p>
  
  <ul>
  <li>having <code>props: ["receiveddata"]</code></li>
  <li>defining a reactive property in <code>data</code> (say, <code>hello: ''</code>)</li>
  <li>in <code>mounted()</code> ensure that <code>this.hello = this.receiveddata</code></li>
  </ul>
  
  <p>I expected at that point <code>this.hello</code> to carry the content brought in by the <code>receiveddata</code> prop, and from that point on work on <code>this.hello</code> (that is: modify it, watch it and <code>$emit</code> it when relevant)</p>
  
  <p>However, when looking at the values in DevTools I see that</p>
  
  <ul>
  <li><code>this.hello</code> is undefined</li>
  <li><code>this.receiveddata</code> correctly holds the data passed to the component</li>
  </ul>
  
  <p>I conclude that, when in <code>mounted()</code>, the props values are not yet known (thus the <code>undefined</code> of <code>this.receiveddata</code>), this <code>undefined</code> is assigned to this.hello, and then later <code>this.receiveddata</code> gets populated (but it's too late for me).</p>
  
  <p>In other words, I plugged my <code>this.hello = this.receiveddata</code> in the wrong place, but I do not really know where it could go elsewhere (I also tried to change <code>mounted()</code> to <code>created()</code>)</p>