vue 3 , white page and error after downgrading vue-cli version

Question

I am using vue cli version 4.0.0 (since I wanted to use vuetify 3).

So I have this minimalistic "login form that is just a button that authenticated via firebase-auth with google provider. In other words, when the user clicks , it logs in with his current google account.

When I run the application, I get a white screen and the following error :

    at eval (useLoginGoogle.js?3049:21)
    at Module../src/composables/useLoginGoogle.js (app.js:1336)
    at webpack_require (app.js:854)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/LoginForm.vue?vue&type=script&lang=js&:5)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/LoginForm.vue?vue&type=script&lang=js& (app.js:1031)
    at webpack_require (app.js:854)
    at fn (app.js:151)
    at eval (LoginForm.vue?125f:1)
    at Module../src/components/LoginForm.vue?vue&type=script&lang=js& (app.js:1300)

Line 21 in useLoginGoogle points to const error2 = ref(null). If I remove anything related to error2, the page loads correctly. So it seems the error comes from ref()?

The exact same code worked fine on a project initiated with vue cli version 4.5.15 Any help will be very welcome

The component:

<template>
    <div>
        <button class="btn btn-success" @click="handleGoogleLogin">GOOGLE SIGN IN</button>
    </div>
</template>


<script>
    import useLoginGoogle from '../composables/useLoginGoogle'
 
    export default {
        setup( context) {
        
            const {error2 , login2 } = useLoginGoogle()

            const handleGoogleLogin = async () => {
                await login2()
                console.log(error2.value)
                if(!error2.value){
                    context.emit('login2')
                    console.log('user logged in by Google')
                } 
            }
            return {handleGoogleLogin}
        }
    }
</script>

the "useLoginGoogle" composable :

import {ref} from 'vue'
import { projectAuth, provider } from '../firebase/config'
import {signInWithRedirect } from "firebase/auth";


const error2 = ref(null)

const login2 = async () => {

    error2.value = null
    try {
        provider.addScope('profile');
        provider.addScope('email');
        let response = await signInWithRedirect(projectAuth, provider);
        error2.value = null
        console.log(response)
        return response
    } catch (err) { 
        console.log(err.value)
        error2.value = 'Incorrect login credentials'
    }
}

const useLoginGoogle = () => {
    return { error2, login2}
}

export default useLoginGoogle