vue composition api not working as intended

Seems there is some problem with refFirstname. Maybe it's a typo issue, but I already checked several times. input refFirstName not working as intended.
<h2> Composition Fullname is {{ refFullName }} </h2> should display fullname. Now it only display lastname.

in Computed1.vue:

<template>
    <div>
        <input type="text" placeholder="First Name" v-model = "fName" />
        <input type="text" placeholder="Last Name" v-model = "lName" />
        <h2> Options Fullname is {{ fullName }} </h2>
        <hr>
        <input type="text" placeholder="First Name" v-model = "refFirstName" />
        
        <input type="text" placeholder= "Last Name" v-model = "refLastname" />

        <h2> Composition Fullname is {{ refFullName }} </h2>

    </div>
</template>

<script>
import { computed, ref,  } from 'vue'
export default {
        name:'Computed1',

        setup(){

            const refFirstname = ref(' ')
            const refLastname = ref(' ')

            const refFullName = computed(function(){
                return  ` ${refLastname.value} ||  ${refFirstname.value} `
            })

            return {refFirstname, refLastname, refFullName}
        },

        data(){
            return{
            fName: '',
            lName: '',
            }
        },

        computed:{
            fullName(){
                return `${this.fName} ${this.lName}`
            }
        },
    }

</script>