Modifier un bouton suite la connexion via un formulaire

Bonjour,
Je suis confronter à un problème sur mon projet quasar framework.
J’ai fais un formulaire de connexion permettant à l’utilisateur de se connecter sur le site.
Mon formulaire fonctionne mais je ne sais pas comment changer le bouton de connexion du layout.

voici mon store_auth :

import { api } from 'boot/axios'
import { afficherMessageErreur } from 'src/fonctions/message-erreur'


// State : données du magasin
const state = {
  user: null,
  token: null,
  //isloggedin: false
}
/*
Mutations : méthode qui manipulent les données
Les mutations ne peuvent pas être asynchrones !!!
 */
const mutations = {
  setUser (state, user) {
    state.user = user
  },
  setToken (state, token) {
    state.token = token
  }
}

/*
Actions : méthodes du magasin qui font appel aux mutations
Elles peuvent être asynchrones !
 */
const actions = {
  enregistrerUtilisateur ({ commit }, payload) {
    const that = this
    api.post('/register', payload)
      .then(function (response) {
        commit('setUser', response.data.user)
        commit('setToken', response.data.access_token)
        that.$router.push('/')
      })
      .catch(function (error) {
        afficherMessageErreur(
          'Création du compte impossible !',
          Object.values(error.response.data)
        )
        throw error
      })
  },

  connecterUtilisateur ({ commit }, payload) {
    const that = this
    api.post('/login', payload)
      .then(function (response) {
        commit('setUser', response.data.user)
        commit('setToken', response.data.access_token)
        that.$router.push('/')
        //isloggedin = true
      })
      .catch(function (error) {
        afficherMessageErreur('Identifiant ou mot de passe incorrect !')
        throw error
      })
  }
}
 
/*
Getters : retourne les données du magasin
Fonctionne comme les propriétés calculées
Sert à calculer, trier, filtrer ou formater les donneés
 */
const getters = {

}

/*
Exporte les constantes, variables du fichier
On pourra ainsi les récupérer, les importer dans un autre fichier JS.

namespace: true, ajoute un namespace à notre objet retourné.
 */
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

et celui du layout :

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          SunShare App
        </q-toolbar-title>
        <q-btn
          to="/connexion"
          flat
          icon-right="account_circle"
          label="Se connecter"
          class="absolute-right"
        />
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from 'components/EssentialLink.vue'

const linksData = [
  {
    title: 'Acceuil',
    caption: '',
    link: '/#/acceuil',
    icon: 'home'
  }, 
  {
    title: 'Graphiques',
    caption: '',
    link: '/#/data',
    icon: 'show_chart'
  },
 
]

export default {
  name: 'MainLayout',
  components: { EssentialLink },
  data () {
    return {
      leftDrawerOpen: false,
      essentialLinks: linksData
    }
  }
}
</script>

Merci d’avance