title: Avoid mutating a prop directly since the value will be overwritten
body: <p>I have very common problem with upgrading to Vue 2.0 </p>
  
  <p>I am getting warning: </p>
  
  <blockquote>
    <p>Avoid mutating a prop directly since the value will be overwritten
    whenever the parent component re-renders. Instead, use a data or
    computed property based on the prop's value. Prop being mutated:
    "username"  (found in the component )</p>
  </blockquote>
  
  <p>I read the documentation many times but I still can't understand how to fix it.</p>
  
  <p><code>username</code> and <code>password</code> are declared in the main Vue app. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>var GuestMenu = Vue.extend({
     props : ['username', 'password'],
        template: `
          &lt;div id="auth"&gt;
              &lt;form class="form-inline pull-right"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="sr-only" for="UserName"&gt;User name&lt;/label&gt;
                    &lt;input type="username" v-model="username" class="form-control" id="UserName" placeholder="username"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label class="sr-only" for="Password"&gt;Password&lt;/label&gt;
                    &lt;input type="password" v-model="password" class="form-control" id="Password" placeholder="Password"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;`,
      });
  </code></pre>
  
  <p>    </p>
  
  <pre><code>App = new Vue ({ 
     el: '#app',
    data: 
      {
        topMenuView: "guestmenu",
        contentView: "guestcontent",
        username: "",
        password: "",
  
      }
  })
  </code></pre>
  
  <p>I tried <code>v-bind</code> but it does not seem to work, and I can't understand why. It should bind the value to parent (the main Vue app)</p>