title: Vue: Setting data from binded prop is using the default value
body: <p>When I pass in <code>name</code> as a prop, it works as expected and sets the <code>nameData</code> data field so that I can change it within the component.</p>
  <p><strong>Parent</strong></p>
  <pre><code>&lt;child name=&quot;charles&quot;&gt;&lt;/child&gt;
  </code></pre>
  <p><strong>Child</strong></p>
  <pre><code>data() {
      return {
          nameData: this.name
      }
  },
  props: {
       name: {type: String, default: &quot;NONE&quot;}
  }
  </code></pre>
  <p>When I bind the prop like below, the <code>nameData</code> data field is set to the default prop, which is &quot;None&quot;.  Why is that?</p>
  <p><strong>Parent</strong></p>
  <pre><code>data() {
     return {
        firstName: &quot;Charles&quot;
    }
  }
  
  &lt;child :name=&quot;firstName&quot;&gt;&lt;/child&gt;
  </code></pre>
  <p><strong>Child</strong></p>
  <pre><code>data() {
      return {
          nameData: this.name
      }
  },
  props: {
       name: {type: String, default: &quot;NONE&quot;}
  }
  </code></pre>