Quasar table header selection value always true

I’m working with vuejs and quasar and I find something. In this component Im using quasar table with multiple selection The header selection is not working as expected. I’m trying to exclude rows with a specified value for ‘deleted’, but the ‘selectAll’ value always evaluates to true. So, when I attempt to deselect all the rows, it doesn’t happen. logging selectAll always gives true.

<template>
  <q-table
    class="invoices-sticky-header-table"
    :rows="filteredInvoices"
    :columns="columns"
    row-key="invoiceId"
    :rows-per-page-options="rowsPerPageOptions"
    :selected-rows-label="getSelectedString"
    :pagination="pagination"
    binary-state-sort
    selection="multiple"
    v-model:selected="selectedRows"
    @update:selected="OnSelectedRowsChangedHandler"
  >
    <template v-slot:header-selection="props">
      <q-checkbox
        :model-value="props.selected"
        @update:model-value="
          (val, evt) => {
            props.selected = val;
            selectFilteredInvoices(val, evt);
          }
        "
      />
    </template>
  </q-table>
</template>
<script lang="ts">
import { type PropType, ref, defineComponent } from "vue";
import type { Invoice, VendorBasic } from "../../interfaces";

export default defineComponent({
  name: "InvoiceTable",
  props: {
    filteredInvoices: { type: Object as PropType<Invoice[]>, required: true },
    vendors: { type: Object as PropType<VendorBasic[]>, required: true },
    maxInvoicesForBulkActions: {
      type: Object as PropType<number>,
      required: true,
    },
  },
  emits: ["onPaid", "onApprove", "onDelete", "onSelectedRowsChanged"],
  setup(props, { emit }) {
    const selectedRows = ref<Invoice[]>([]);
    function formatDateTime(dateTimeString: string) {
      if (!dateTimeString) {
        return dateTimeString;
      }
      const newDate = new Date(dateTimeString);
      return (
        newDate.toLocaleDateString("en-GB", {
          day: "2-digit",
          month: "short",
          year: "numeric",
        }) +
        ", " +
        newDate
          .toLocaleTimeString("en-GB", {
            hour: "2-digit",
            minute: "2-digit",
            hour12: true,
          })
          .toUpperCase()
      );
    }
    const onDeleteHandler = (invoiceId: number) => {
      emit("onDelete", invoiceId);
    };

    const onApproveHandler = (invoice: Invoice) => {
      emit("onApprove", invoice);
    };

    const onPaidHandler = (invoice: Invoice) => {
      emit("onPaid", invoice);
    };

    const OnSelectedRowsChangedHandler = (rows: readonly any[]) => {
      emit("onSelectedRowsChanged", rows);
    };

    const getSelectedString = (numberOfRows: number) => {
      let message = `${numberOfRows} rows are selected. Bulk actions are available for maximum 5.`;

      if (numberOfRows > props.maxInvoicesForBulkActions) {
        message = `${message} Please unselect some.`;
      }

      return message;
    };

    const rowsPerPageOptions = ref<number[]>([100, 200, 500]);

    const columns = [
      {
        name: "id",
        align: <"left" | "right" | "center">"center",
        label: "Id",
        field: (row: Invoice) => row.invoiceId,
        sortable: true,
      },
      {
        name: "code",
        align: <"left" | "right" | "center">"center",
        label: "Code",
        field: (row: Invoice) => row.invoiceCode,
        sortable: true,
      },
      {
        name: "url",
        align: <"left" | "right" | "center">"center",
        label: "File URL",
        field: (row: Invoice) => {},
        sortable: true,
      },
      {
        name: "vendorName",
        label: "Vendor",
        align: <"left" | "right" | "center">"left",
        field: (row: Invoice) =>
          props.vendors
            ?.find((v: VendorBasic) => v.vendorId == row.vendorId)
            ?.username.split("(")[0]
            .trim(),
        sortable: true,
      },
      {
        name: "creationDate",
        label: "Creation Date",
        align: <"left" | "right" | "center">"left",
        field: (row: Invoice) => formatDateTime(row.created),
        sortable: true,
      },
      {
        name: "invoiceTotal",
        label: "Total",
        align: <"left" | "right" | "center">"left",
        field: (row: Invoice) => row.invoiceTotal,
        sortable: false,
      },
      {
        name: "approved",
        align: <"left" | "right" | "center">"center",
        label: "Approved",
        field: () => {},
      },
      {
        name: "paid",
        align: <"left" | "right" | "center">"center",
        label: "Paid",
        field: () => {},
      },
      {
        name: "deleted",
        align: <"left" | "right" | "center">"center",
        label: "Deleted",
        field: () => {},
      },
    ];

    const pagination = {
      rowsPerPage: 200,
      sortBy: "id",
      descending: true,
    };

    const selectFilteredInvoices = (selectAll: boolean, evt: any) => {
      console.log(selectAll);
      if (selectAll) {
        selectedRows.value = props.filteredInvoices.filter(
          (row) => !row.deleted
        );
      } else {
        console.log("hello reached");
        selectedRows.value = [];
      }
    };

    return {
      selectFilteredInvoices,
      formatDateTime,
      columns,
      pagination,
      rowsPerPageOptions,
      onDeleteHandler,
      onPaidHandler,
      onApproveHandler,
      getSelectedString,
      OnSelectedRowsChangedHandler,
      selectedRows,
    };
  },
});
</script>

<style lang="sass" scoped>
.button-table
  font-size: 10px
.date-text
  margin: 0px
</style>

Commetting this piece of code concerning filtering the selectedRows make the selectAll change its value so this line is the problem,

selectedRows.value = props.filteredInvoices.filter(
          (row) => !row.deleted