title: Displayname appears after a refresh
body: <p>I use vue and firebase and firestore</p>
  <p>I automatically log in when I sign up.
  The problem is that after automatic login, my name needs to be refreshed to update.</p>
  <p>Below is a picture of the description.</p>
  <p>before refreshing
  <a href="https://i.stack.imgur.com/yq7T7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yq7T7.png" alt="before refreshing" /></a></p>
  <p>after refreshing<a href="https://i.stack.imgur.com/dUZVc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dUZVc.png" alt="after refreshing" /></a></p>
  <pre><code>{{ user.displayName }}
  
    created () {
      firebase.auth().onAuthStateChanged((user) =&gt; {
        if (user) {
          this.user = user
        } else {
          this.user = ''
        }
      })
    }                        in Navbar.vue
  
  
  methods: {
  async SignUp () {
    await firebase.auth().createUserWithEmailAndPassword(this.user.email, this.user.password)
      .then((res) =&gt; {
        res.user.updateProfile({
          displayName: this.user.name
        })
        const uid = firebase.auth().currentUser.uid
        const createdAt = new Date()
        db.collection('users').add(
          {
            name: this.user.name, email: this.user.email, createdAt, uid
          }
        )
        alert('success!')
        this.$router.push({ name: 'Home' })
      })
      }
    }                       in register.vue
  </code></pre>
  <p>Is there a way to update the user's name without refreshing?</p>
  <p>If I log in through the login window, I don't have to refresh it.
  If I log in through automatic login after signing up, the user's name does not appear.</p>