vue.js - Avoid mutating a prop directly since the value will be overwritten -

i have common problem upgrading vue 2.0

i getting warning:

avoid mutating prop directly since value overwritten whenever parent component re-renders. instead, use data or computed property based on prop's value. prop being mutated: "username" (found in component <guestmenu>)

i read documentation many times still can't understand how fix it.

username , password declared in main vue app.

here code:

var guestmenu = vue.extend({    props : ['username', 'password'],       template: `         <div id="auth">             <form class="form-inline pull-right">                 <div class="form-group">                     <label class="sr-only" for="username">user name</label>                   <input type="username" v-model="username" class="form-control" id="username" placeholder="username">                 </div>                 <div class="form-group">                   <label class="sr-only" for="password">password</label>                   <input type="password" v-model="password" class="form-control" id="password" placeholder="password">                 </div>             </form>         </div>`,     }); 

 

app = new vue ({     el: '#app',   data:      {       topmenuview: "guestmenu",       contentview: "guestcontent",       username: "",       password: "",      }     }) 

i tried v-bind not seem work, , can't understand why. should bind value parent (the main vue app)

if want mutate props - use object.

<component :user="global.user"></component> 

component:

    props: ['user'],     methods: {       setuser: function() {         this.user.username= "user";         this.user.password= "mypass123";       }     }