how to solve firebase auth version 9 problem in vuejs

Question

Hello Im doing a vue version 2 project with firebase version 9 but when I try to set the authentication I get an error when I click to create the account.

I have a file called firebase.js where I have put the credentials of the project that is created.

someone could give me some light on this

Thanks!

I attach images of my code

console error

firebase.js

<template>
<div class="vue-tempalte">
    <form @submit.prevent="userRegistration">
        <h3>Crear nueva cuenta</h3>
        <div class="form-group">
            <label>Nombre</label>
            <input type="text" class="form-control form-control-lg" v-model="user.name" />
        </div>
        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control form-control-lg" v-model="user.email" />
        </div>
        <div class="form-group">
            <label>Contraseña</label>
            <input type="password" class="form-control form-control-lg" v-model="user.password" />
        </div>
        <button type="submit" class="btn btn-dark btn-lg btn-block">
           Crear cuenta
        </button>
        <p class="forgot-password text-right">
            Ya está registrado 
            <router-link :to="{name: 'login'}">Acceder a tu cuenta?</router-link>
        </p>
    </form>
</div>

<script>
import firebase from '../firebase';
export default {
  data() {
    return {
      user: {
        name: '',
        email: '',
        password: ''
      }
    };
  },
  methods: {
    userRegistration() {
      firebase
      .auth()
      .createUserWithEmailAndPassword(this.user.email, this.user.password)
      .then((res) => {
        res.user
          .updateProfile({
            displayName: this.user.name
          })
          .then(() => {
            this.$router.push('/login')
          });
      })
      .catch((error) => {
         alert(error.message);
      });
    }
  }
};
</script>