I have a problem where I can connect my firebase database collection "Agricultures" but I cannot connect with the "Admins" collection. Here are some of my codes in my firebase file.

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const AgriColRef = collection(db, "Agricultures");
export const AdminColRef = collection(db, "Admins");

export default AgriColRef; 

However, it returned with the error

[Vue warn]: Property "fname" was accessed during render but is not defined on instance.    
at <AddAdmin onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >    
at <RouterView>    
at <App>

including for the other attributes.

Here is the code in the AddAdmin file

<script>
import { AdminColRef } from '../firebase';
import { addDoc } from 'firebase/firestore'

export default {
    dataAdmin(){
        return {
            fname:null,
            lnama:null,
            workerno:null,
        };
    },
    methods: {
        async createAdmin() {
            console.log("Create");
            const addedDoc = await addDoc(AdminColRef, this.$dataAdmin);
            console.log(addedDoc);
        }
    }
};
</script>

Next is in the router

import AddAdmin from '../components/admin/AddAdmin.vue'
const routes = [{
        path: '/add-admin',
        name: 'addAdmin',
        component: AddAdmin
    }]
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

And in the App file

<nav>
   <router-link to="/add-admin">Add Admin</router-link>
</nav>