Vuelidate isUnique causing infinite loop

i have a problem in vuelidate that causing infinite loop. Here's a brief process of my project. I have a datatable, I used Firebase OnSnapShot function to paginate the table. The table have action column that will show a modal when clicked. When i'm updating the value came from the table, vuelidate isUnique functions fires an infinite loop.

P.S I'm detaching the listener before viewing the modal

Output of infinite loop :

Here's my function to load the datatable:

 async loadData(firebasePagination) {
      // query reference for the messages we want
      let ref = firebasePagination.db;

      // single query to get startAt snapshot
      ref.orderBy(firebasePagination.orderColumn, 'asc')
        .limit(this.pagination.rowsPerPage).get()
        .then((snapshots) => {
          // save startAt snapshot
          firebasePagination.start = snapshots.docs[snapshots.docs.length - 1]

          // create listener using endAt snapshot (starting boundary)
          let listener = ref.orderBy(firebasePagination.orderColumn)
            .endAt(firebasePagination.start)
            .onSnapshot((datas) => {
              if(!datas.empty){
                datas.docs.forEach((data, index) => {
                  //remove duplicates
                  console.log("here")
                  firebasePagination.data = firebasePagination.data.filter(x => x.id !== data.id)
                  //push to the data
                  firebasePagination.data.push(Object.assign({id : data.id },data.data()))

                  if(datas.docs.length-1 === index){
                    //sort
                    firebasePagination.data.sort((a, b) => (a[firebasePagination.orderColumn] > b[firebasePagination.orderColumn]) ? 1 : -1)
                    //get the current data
                    firebasePagination.currentData = this.getCurrentData(firebasePagination)
                  }
                })
              }
            })
          // push listener
          firebasePagination.listeners.push(listener)
        })
      return firebasePagination;
    }

Here's my function when clicking the action (Modal):

   switch(items.action) {
      case 'edit':
        //detaching listener
        this.firebasePagination.listeners.forEach(d => {
          d()
        });
        items.data.isEdit = true;
        this.clickEdit(items.data);
        break;
    }
  }

Here's my isUnique function:

validations: {
      department: {
        name: {
          required,
          async isUnique(value){
            if(value.trim() === ''){
              return false;
            }
            if(strictCompareStrings(this.departmentName, value)){
              this.departmentError.isActive = true;
              this.departmentError.isValid = true;
              return true;
            }
            const result = await checkIfUnique(DB_DEPARTMENTS, {nameToLower : this.department.name.toLowerCase()});
            console.log("GOES HERE")

            if(!result.isValid){
              result.errorMessage = result.isActive ?
                'Department already exists.' : 'Department has been archived.';
            }
            this.departmentError = Object.assign({}, result);
            return this.departmentError.isValid;
          }
        }
      }
    }

Here's my checkUnique function :

export const checkIfUnique = (db, nameObj, isTrim = true) => {
  return new Promise(resolve => {
    const nameObjKey = Object.keys(nameObj)[0];
    const name = isTrim ? nameObj[nameObjKey].replace(/\s+/g,' ').trim().toLowerCase() : nameObj[nameObjKey].trim();
    db().where(nameObjKey, '==', name).get()
      .then((doc) => {
        let result = {isActive: false, isValid: true, errorMessage: ''};
        if(!doc.empty){
          result.isActive = doc.docs[0].data().isActive;
          result.isValid = false;
        }
        resolve(result);
      })
  });
};