I'm using SessionStorage data to display the username on the screen. The name should load after login, but the information is only loaded when I refresh the page (clicking on reload). Does anyone know why?

    HTML
    <cv-header-name to="/"> Welcome {{ userName }}</cv-header-name>


    VUE
      data: function () {
       return {
       userName: [],
       };
      },
      mounted() {
        if(sessionStorage.getItem('name')) {
      try {
        this.userName = JSON.parse(sessionStorage.getItem('name'))
      }catch (error) {
        sessionStorage.removeItem('name')
      }
    }
    }

Before refresh enter image description here

After refresh enter image description here