When using Firebase auth/login with Vue.js, how can the callback from Firebase set data inside the Vue app?

Question

I'm using Firebase for login. I'm also using Vue.js with VueFire. If I use the firebase.auth().onAuthStateChanged( onUserLogin ); call, I am unsure how I can get the results from onUserLogin into the data of the vue app. I tried creating a "global" variable (called email) and then mapping that inside the data like this, but it does not show in my template with {{ email }}. Perhaps I need to set onUserLogin inside my methods attribute when creating the Vue app? Or, should I somehow be using user inside the Firebase attribute (is this automatically associated with the login?)

var onUserLogin = function(user) {
  if (user) {
    email = user.email;
    console.log( "email", email );
  }
}

var email;

new Vue( {
  el: "#app",
  data: {
    email: email
  },
  firebase: {} // Is something supposed to be here?
  methods: {
    loginToFirebase: function() {
      if (!firebase.auth().currentUser) {
        var provider = new firebase.auth.GithubAuthProvider();
        firebase.auth().signInWithPopup( provider ).then( afterSignIn ).catch( signInError );
      } else {
        firebase.auth().signOut();
      }
    },
  }
});

firebase.auth().onAuthStateChanged( onUserLogin );

My HTML looks like this (basically, just a button to call loginToFirebase):

<div id="app">
<button v-on:click="loginToFirebase">Login</button>

Email: {{ email }}

<script src="https://www.gstatic.com/firebasejs/3.5.3/firebase.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
<script src="firebase-init.js"></script>
<script src="script.js"></script>
</div>

Answer 1

The answer was to put firebase.auth().onAuthStateChanged( onUserLogin ); inside the mounted hook:

new Vue( {
  mounted: function() {
    firebase.auth().onAuthStateChanged( this.onUserLogin );
  },
  data: {
    user: undefined
  }
  methods: { 
    onUserLogin: function( user ) {
      this.user = user;
    }
  }
  el: "#app"
})