避免直接更改道具，因为值会被覆盖

我在升级到Vue 2.0时遇到一个非常普遍的问题

我收到警告：

避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。变异的道具：“用户名”（在组件中）

我阅读了很多次文档，但仍然不知道如何解决。

username并且password在主Vue应用中声明。

这是我的代码：

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: "",

    }
})

我试过了，v-bind但是似乎没有用，我也不明白为什么。它应该将值绑定到父项（主Vue应用）