【Firebase】 firebaseにおける非同期処理について

Question

firebaseを使い会員登録画面の実装

現在Firebaseを使い会員登録　ログイン画面を作っています。
その際に　action経由で実装することが慣習になっていると聞いて、現在のコードから書き換えようとしていたのですが、うまく出来ず行き詰まってしまったため、質問させていただきました。

発生している問題・エラーメッセージ

firebase側でユーザー情報は確認できているで、action経由という部分だけ修正したいです。
よろしくお願いいたします。

該当のソースコード

<template>
  <div class="form">
    
    <img alt="Vue logo" src="../assets/logo.png">

    <h1>新規登録画面</h1>
    <table>
      <tr>
        <td>ユーザー名</td>
        <td><input type="text" placeholder="userName" v-model='userName'></td>
      </tr>
      <tr>
        <td>メールアドレス</td>
        <td><input type="text" placeholder="E-mail" v-model='email'></td>
      </tr>
      <tr>
        <td>パスワード</td>
        <td><input type="text" placeholder="Password" v-model='password'></td>
      </tr>  
    </table>

    <button @click="signUp" class="link-signup">新規登録</button>
    <router-link class="link-signin" to="/signin">ログインはこちらから</router-link>

  

  </div>
</template>


<script>
  import firebase from 'firebase'

export default{
  name:'Signup',
  data(){
    return{
      userName:'',
      email:'',
      password:''
    }
  },
  methods:{
    signUp:function(){
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
      .then((response) => {
        response.user.updateProfile({
          displayName:this.userName,
        })
      }
        )
      .catch(
        )
    }
  }
}

</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})