trying to get firebase and vuex to play together

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
      <template v-if="user.loggedIn">
         <v-toolbar-title>Welcome {{ this.$store.getters.user.data.displayName }} </v-toolbar-title> 
      </template>
      <template v-else>
      <v-toolbar-title>Welcome</v-toolbar-title>
      </template>


        <v-card
        class="mx-auto pa-3 ma-2 text-center"
        max-width="400"
        v-for="handle in handles"
        :key="handle.id"
      >
        <v-row>
          <v-col cols="8">
            <v-list-item-title class="headline mb-1">{{ handle.name }}</v-list-item-title>
          </v-col>
          <v-col cols="4">
            <v-btn icon color="red" @click="deleteHandle(handle.id)">
              <v-icon>mdi-delete</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import firebase from 'firebase/app'
import 'firebase/firestore'

export default {
  data: () => ({
    handle: 'test',
    handles: [],
  }),

  watch: {
    user(newVal, oldVal) { // never gets called
      console.log('new user: %s, old: %s', newVal, oldVal)
      this.$bind('handles', firebase.firestore().collection('handles'))
    },
  },

  mounted() { // null
    console.log("mounted: " + this.user.data) 
  },
  beforeUpdate() { // works, logs user name
    console.log("beforeUpdate: " + this.user.data.displayName)
  },
  updated() { // works
    console.log("updated: " + this.user.data.displayName)
  },
  beforeDestroy() { // works
    console.log("beforeDestroy: " + this.user.data.displayName)
  },
  computed: {
    // map `vm.user` to `vm.$store.getters.user`
    ...mapGetters({
      user: "user"
    })
  }
}
</script>