Update component in Vuejs

I am having a problem, I have developed an app where you have a login. Once logged in, it takes you to the user profile, but always the information of the previous user appears, only updated when I change the script and then automatically refreshes the Vuejs server and then appears with the user's information at that moment. Also when I just started the app does not recognize the user logged in at that time, just when I update the page recognizes it.

1) Someone knows how to update a div every so often with VueJS 2) How do I recognize the user at the beginning of the profile template when the user is logged in and redirected to the template.

Perfil.vue

<template>
<div id='perfil'>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse " id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<a href="#" @click="logout">Logout</a>
<a href="#" @click="datos">DATOS</a>
<div class="col-sm-8  center text-center cardclass">

      </div>
  <div class="container">
  <div class="row">
    <div class="col-sm-8">
       <div class="card">
          <div class="card-header">
              <h3>Registra gratis</h3>
          </div>
          <div class="card-body">

              <form @submit.prevent="registrarVariable">
                   <div class="form-group">                   
                       <input type="text" id="Variablenom"  class="form-control" placeholder="Nombre de la Variable" v-model="Variable.Variablenom">
                    </div>
                    <div class="form-group row">
                        <label for="example-date-input" class="col-2 col-form-label">Nacimiento</label>
                        <div class="col-10">
                          <input class="form-control" type="date" value=""  v-model="Variable.Variable_nacimiento" name="Variable_nacimiento" id="Variable_nacimiento">
                        </div>
                    </div>

                    <div class="form-group">

                       <input type="text" class="form-control" placeholder="sexo" v-model="Variable.sexo">
                    </div>
                    <div class="form-group">


                <button type="submit" class="btn btn-primary">Registrar</button>
              </div>

              </form>

          </div>
 <p v-if="errors.length">
    <b>Por favor corrige los siguientes errores : </b>
    <ul>
      <li v-for="er in errors">{{ er }}</li>
    </ul>
  </p>
        </div>
    </div>
    <div  class="col-sm-4">
      <div class="card" style="width: 18rem;">
  <div class="card-header">
    Mis Variables
  </div>

  <ul class="list-group list-group-flush" id="Variablecomp">
    <li v-for="m in Variabledb "

     class="list-group-item" v-bind:key="m['.key']">
     {{m.Variablenom}} 
      <span class="delete">
       <a href="#"  @click="eliminarVariable(m)"><i class="fas fa-trash"></i></a> 
        <a href="#" data-toggle="modal" data-target="#myModal"  ><i class="fas fa-edit"></i></a>
        <a href="#" ><i class="fas fa-share-alt-square"></i></a>
        </span> 

    </li>

  </ul>
</div>

    </div>

  </div>
</div>




<footer class="footer">

      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>


<!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>
</div>


</template>
<script>

import firebase,{ auth } from 'firebase'
import mdb from '../config'
import toastr from 'toastr'
import Vue from 'vue'
import admin from 'firebase-admin'
import VueSession from 'vue-session'
import Router from 'vue-router'


let Variablesdb = mdb.ref('Variables');
let usuariosdb = mdb.ref('usuarios');
var vm = this;
var user = firebase.auth().currentUser;
var name,email,photoUrl,usersid,Variablesd;


if (user == '[object Object]') {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  usersid = user.uid;
  Variablesd = mdb.ref('Variables').child(usersid).child('Variable');
 console.log(" 1 LOG : "+Variablesd);

}else{
  Variablesd = mdb.ref('Variables').child('Variable');
  console.log(" 1 ERROR : "+Variablesd);
}


firebase.auth().onAuthStateChanged(function(user,request) {
  if (user) {
       if (user == '[object Object]') {
        name = user.displayName;
        email = user.email;

        usersid = user.uid;
        Variablesd = mdb.ref('Variables').child(usersid).child('Variable');
        console.log(" 2 LOG : "+Variablesd);


        }else{

        Variablesd = mdb.ref('Variables').child('Variable');
        console.log(" 2 ERROR : "+Variablesd);
}

  }
});


export default {
  name: 'perfil',
  firebase:{
   usuarios : usuariosdb,
   Variables : Variablesdb,
   Variabledb:Variablesd



  },
  data () {

    return {
      errors:[],
        Variable:{
          Variablenom:'',
          Variable_nacimiento:'',
          sexo:'',
          iduser:'', 
        }
    }
  },
  methods:{
      registrarVariable(e){
          this.errors = [];
          if(!this.Variable.Variablenom){
              toastr.error('Debes colocar el nombre de tu Variable');
              this.errors.push('Debes colocar el nombre de tu Variable');
          }
          else if(!this.Variable.Variable_nacimiento){
              toastr.error('Debes colocar la fecha de nacimiento de tu Variable');
              this.errors.push('Debes colocar la fecha de nacimiento de tu Variable');
          }else if(!this.Variable.sexo){
              toastr.error('Debes colocar el sexo de tu Variable');
              this.errors.push('Debes colocar el sexo de tu Variable');
          }else{

            var user = firebase.auth().currentUser;
            var self = this
            let usersid = user.uid;
            this.Variable.iduser=usersid

            Variablesdb.child(usersid).child('Variable').push(this.Variable).key;
            this.Variable.Variablenom='',
            this.Variable.Variable_nacimiento='',
            this.Variable.sexo='',
            this.Variable.iduser='',
            toastr.success('Variable agregada correctamente');

          }

      },

      logout(){
         firebase.auth().signOut().then(()=>this.$router.replace('login'));
      },
      datos(){
          var user = firebase.auth().currentUser;

          if (user != null) {
          user.providerData.forEach(function (profile) {
          console.log("Sign-in provider: " + profile.providerId);
          console.log("  Provider-specific UID: " + profile.uid);
          console.log("  Name: " + profile.displayName);
          console.log("  Email: " + profile.email);
          console.log("  Photo URL: " + profile.photoURL);
          console.log("ID : "+user.uid);
          });
}
      },
      eliminarVariable(Variable){
      if(confirm('Quieres elimnar de la lista?')){
        Variablesdb.child(Variable['.key']).remove();
        toastr.success('eliminado');
      }
    },
      editarVariable(Variable){

        Variablesdb.child(Variable['.key']).updated({ edit:true });
        toastr.success('Guardado');

  },CancelEditarVariable(Variable){

        Variablesdb.child(Variable['.key']).updated({ edit:false });
        toastr.success('Cancelador');

  },metodoOnBlur(Variable){

    const chields = Variablesdb.child(Variable['.key']).child('iduser');
    return chields
  }
}
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.delete{
  margin-left:40%;
}
.cardclass{
  margin-top: 5%;
  margin-bottom: 5%;
}
.col-center{
  float: none;
  margin-left: auto;
  margin-right: auto;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>