How do i add data into my firebase through vuex 4

Question

Below are the codes i tried but i only received an error and the page was unable to load until i commented out the updating and adding codes from the store .js , below are the codes in my store.js all functions don't work except login codeand setAuthIsReady:

const auth = getAuth()

const db = getFirestore()

const colRef = collection(db, 'profile')

getDocs(colRef)
.then((snapshot) => {
  let profile = []
  snapshot.docs.forEach((doc)=>{
    profile.push({...doc.data(), id:doc.id })
  })
console.log(profile)
})
.catch(err =>{
  console.log(err.message)
})
const addProfileForm = document.querySelector('.add')
addProfileForm.addEventListener('submit', (e)=>{
  e.preventDefault()

  addDocs(colRef, {
    name:addProfileForm.name.value,
    course:addProfileForm.course.value,
    reg:addProfileForm.reg.value,
    phone:addProfileForm.phone.value,

  })
  .then(()=>{
    addProfileForm.reset()
  })
})
const updateProfileForm = document.querySelector('.add')
updateProfileForm.addEventListener('submit', (e)=>{
  e.preventDefault()
}


export { auth, getFirestore, collection, getDocs, addDocs }

Also below are the codes in my component in which i want to enter the data which is to be saved into the firebase:

<template>
  <div class="q-pa-md">
    <q-layout  view="hHh Lpr lff"   >
      <q-header elevated class="bg-black">
        <q-toolbar class="bg-blue">
          <q-btn flat @click="drawer = !drawer" round dense icon="menu" />
        </q-toolbar>
      </q-header>
<q-card style="max-width: 300px">
      <q-drawer
        v-model="drawer"
        show-if-above

        :mini="miniState"
        @mouseover="miniState = false"
        @mouseout="miniState = true"
        mini-to-overlay

        :width="200"
        :breakpoint="500"
        bordered
        class="bg-grey-3"
      >
        <q-scroll-area class="fit">
          <q-list padding>
             <q-item clickable v-ripple>
              <q-item-section avatar>
                <router-link style="text-decoration:none;" to="/home">
                <q-icon name="home" color="blue" />
                </router-link>
              </q-item-section>

              <q-item-section>
                  <router-link style="text-decoration:none;" to="/home">
                   Home
                  </router-link>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <router-link style="text-decoration:none;" to="/dash">
                <q-icon name="dashboard" color="blue" />
                </router-link>
              </q-item-section>

              <q-item-section>
                  <router-link style="text-decoration:none;" to="/dash">
                Dashboard
                  </router-link>
              </q-item-section>
            </q-item>

            <q-item active clickable v-ripple>
              <q-item-section avatar>
                <router-link to="/notes">
                <q-icon color="blue" name="books" />
                </router-link>
              </q-item-section>

              <q-item-section>
                <router-link style="text-decoration:none;" to="/notes">
                Notes
                </router-link>
              </q-item-section>
            </q-item>

            
            <q-item active clickable v-ripple>
              <q-item-section avatar>
                <router-link to="/">
                <q-icon @click="handleClick" color="blue" name="logout" />
                </router-link>
              </q-item-section>

              <q-item-section>
                <router-link @click="handleClick" style="text-decoration:none;" to="/">
                Sign Out
                </router-link>
              </q-item-section>
            </q-item>

            
          </q-list>
        </q-scroll-area>
      </q-drawer>
</q-card>

      <q-page-container>
        <q-page >
      <q-card class="my-card">
      <q-card-section horizontal>
          <q-img
          class="col-2"
          src="../assets/uni.png"
          
        />
      </q-card-section>
        <q-card-section>
          <h3>News/Events</h3>
          <p>Cat 1 will be commenced on Novmber 28 <br/> 2022 </p>
          
          <q-btn label="View Timetable" color="primary" rounded @click="timetable = true" />
          
          
          
          <q-dialog v-model="timetable">
      <q-card class="my-prof lt-xl">
        <q-card-section>
          <div class="text-h6">Timetable</div>
        </q-card-section>
         <img :src="time">

        <q-card-section class="q-pt-none">

         

        </q-card-section>

        <q-card-actions align="right" class="text-primary">
          <q-btn flat label="Close" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>

              
      </q-card-section>
    </q-card>

    <div class="q-pa-md row items-start q-gutter-md">
    <q-card class="my-cad">
     
     
      <q-card-section class="bg-orange">
       

       <div class="row no-wrap items-center">
         <div class="col text-h6 ellipsis font-weight-bold">
           Payments Details
         </div>
         
       </div>

       
     </q-card-section>

     <q-card-section class="q-pt-none bg-orange">
      
       <div class="text-caption text-black  ">
        All fees are paid in this account number:<br /> 
      Account Number: 20510018688 <br/>
      
      Account Name: DMI and Collaborators Trust<br/>
       </div>
     </q-card-section>
     

       
     
    </q-card>

    <q-card class="my-cad bg-blue">
      <q-card-section >
       

       <div class="row no-wrap items-center">
         <div class="col text-h6 ellipsis font-weight-bold">
           Assignments
         </div>
         
       </div>

     </q-card-section>

     <q-card-section class="q-pt-none">
      
       <div class="text-caption text-black  ">
          All assignments are provided by a respective lecturer<br/> 
      To view your progress click below
       </div>
     </q-card-section>


      <q-card-actions align="right">
       
      </q-card-actions>
    </q-card>

    <q-card class="my-cad bg-green">
      <q-card-section>
       

       <div class="row no-wrap items-center">
         <div class="col text-h6 ellipsis font-weight-bold">
           Results
         </div>
         
       </div>

       
     </q-card-section>

     <q-card-section class="q-pt-none">
      
       <div class="text-caption text-black  ">
         Results are provided at each end of semister. <br/>
       </div>
     </q-card-section>
     </q-card>
     </div>
         
           
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import uni from '../assets/uni.png'
import time from '../assets/time.jpg'
import { useStore } from 'vuex'

const store = useStore()

const handleClick = () => {
  store.dispatch('logout')
}

export default {
  setup () {
    return {
      drawer: ref(false),
      miniState: ref(true),
      timetable:ref(false),
      uni:uni,
      installment:ref(false),
      time:time,
      handleClick,
      

      user: computed(()=> store.state.user)
    }
  }
}
</script>
<style lang="sass" scoped>
.my-cad
  width: 80%
  max-width: 330px
.my-cre
  width: 80%
  max-width: 330px
.my-card
  width: 100%
  max-width: 1450px
</style>

I tried saving and fetching data from firebaseyour text