[Vue] image component show only when clicked on the router link

Hello i’m facing an issue on my avatar component, the image that i load from an url stocked in my vuex store doesn’t show up.

here’s my avatar component

<template>
  <img :src="avatarUrl"/>
</template>

<script>
export default {
computed: {
  avatarUrl() {
    return this.$store.state.user.userAvatarUrl
  }
}
}
</script>

here’s how i commit the image url in my store from App.vue:

  created() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        let avatarRef = firebase.storage().ref().child(`avatars/${this.$store.state.user.displayName}`) 
        // fetch the image reference from my database
        this.$store.commit('avatarRef', avatarRef)
        this.$store.state.user.avatarRef.getDownloadURL().then(url => {
        // getDownloadURL() is a method from firebase-storage to get an URL from a image stocked in the DB
          this.$store.commit('userAvatarUrl', url)
        })
      }
   })
}

This image from the avatar component doesn’t render if i press F5 on the page or redirect the user to this page, he obligatory have to click on the router link to the view. How to avoid that ?
I have to navigate on another route and come back to see it.
I tried to force rerender on all lifecycle hooks with :key and use this.$nexttick but that don’t work too.

Thanks for the help

Can you use mapState from vuex to bind the value from the state to your component?