在子项中更改后，与组件动态链接的prop变得不确定

Question

所以我遇到了一个用于登录github的组件的问题。

我将一个名为username的变量链接到该组件，以便该组件完成其在用户中的登录工作后，会将用户名更新为该变量，以便其他地方的应用程序可以使用它

我这样做是这样的：

在App.vue中

<other app tags....>
<SignInWithGithub
  github_clientid="5c6f1bd40f1841f1674a"
  v-bind:username_object="username"/>
<other app tags....>

，它正在App.vue中用null初始化：

data () {
  return {
    username: null
  }
}

在组件SignInWithGithub中：

mounted () {
  console.log("in child: " + this.username_object) //null
  setInterval(function() {
    console.log("in child: " + this.username_object) //undefined
  },2000)
  this.checkLogin()
},
props: [
  'github_clientid',
  'username_object'
],
methods: {
  checkLogin: function() {
    fetch('/whoami', {credentials: 'same-origin'})
    .then(res => res.json())
    .then(({logged_in, github_userid, github_username}) => {
       if(logged_in) {
         this.show_login_button = false;
         this.github_login_link = null;
         this.github_userid = github_userid;
         console.log(this.username_object) //null
         this.username_object = github_username;
         console.log(this.username_object) //tomklino
       } else {
         this.show_login_button = true;
       }
     })
  }
},

在组件的checkLogin函数中，我获得了分配值时期望的值，但是一旦完成，该值将变得不确定，并且我不明白为什么。

对我可能错过的任何见解？