title: Vue.js - data value does not set from prop
body: <p><strong>What do I have</strong>: two components, parent and child.</p>
  
  <p>Parent</p>
  
  <pre><code>&lt;UserName :name=user.name&gt;&lt;/UserName&gt;
  ...
  components: {UserName},
      data() {
        return {
          user: {
            name: '',
            ...
          }
        }
      },
      created() {
        this.fetchUser()
        console.log(this.user) //&lt;- object as it is expected
      },
      methods: {
        fetchUser() {
          let that = this
          axios.get(//...)
            .then(response =&gt; {
              for (let key in response.data) {
                that.user[key] = response.data[key]
              }
            })
          console.log(that.user) //&lt;- object as it is expected
        }
      }
  </code></pre>
  
  <p>Child</p>
  
  <pre><code>&lt;h3 v-if="!editing" @click="edit"&gt;{{ usersName }}&lt;/h3&gt;
  &lt;div v-if="editing"&gt;
      &lt;div&gt;
          &lt;input type="text" v-model="usersName"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  ...
  props: {
    name: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      editing: false,
      usersName: this.name,
      ...
    }
  },
  </code></pre>
  
  <p><strong>Problem</strong>: even when <code>name</code> prop is set at child, <code>usersName</code> data value is empty. I've inspected Vue debug extension - same problem.</p>
  
  <p><strong>What have I tried so far</strong> (nothing helped):</p>
  
  <p>1) <code>props: ['name']</code>  </p>
  
  <p>2)</p>
  
  <pre><code>props: {
    name: {
      type: String
    },
  },
  </code></pre>
  
  <p>3) <code>usersName: JSON.parse(JSON.stringify(this.name))</code></p>
  
  <p>4) <code>&lt;UserName :name="this.user.name"&gt;&lt;/UserName&gt;</code></p>
  
  <p>P. S. when I pass static value from parent to child</p>
  
  <pre><code>&lt;UserName :name="'just a string'"&gt;&lt;/UserName&gt;
  </code></pre>
  
  <p><code>usersName</code> is set correctly.</p>
  
  <hr>
  
  <p>I've also tried to change <code>name</code> prop to some <code>foobar</code>. I guessed <code>name</code> might conflict with component <code>name</code> exactly. But it also didn't helped.</p>