css count-increment on every page-break

i have created a header and footer that will only show when the user exports the page, I am trying to add a custom pagination when printing but it does not seem to increment and is stuck with “Page 1”, is there a way for the CSS to detect page break? i have a page-break-after: always in one of the components since it usually has more than 1 page when exported. or is it because my footer is in a separate div from the components?

here is my partial code
my css:

body {
  counter-reset: page 1;
}

@media print {
  .pagebreak-after {
    padding-top: 1rem;
    page-break-after: always;
  }
  .print_footer {
    visibility: visible;
    position: fixed;
    display: flex;
    bottom: 2%;
    padding: 1rem;
    width: 100%;
    border-top: 1px solid black;
  }
  .counter::after {
    counter-increment: page;
    content: " | Page " counter(page);
  }
  .adjust_on_print {
    margin-top: 3rem !important;
  }
  .no-print {
    display: none;
    visibility: hidden;
  }
  .print_header {
    visibility: visible;
    position: fixed;
    top: 2%;
    width: 100%;
    border-bottom: 1px solid gray;
  }
}

my code:

<div class="content">
  <div class="row d-flex no-print">
    <div v-if="false" class="col d-flex align-items-center">
      <a class="nav-link" :href="json_data" :download="file_name">
        <button
          class="btn btn-sm btn-outline-secondary d-flex align-items-center"
        >
          <i class="mdi mdi-printer mr-1" /><small>Export</small>
        </button>
      </a>
    </div>
    <div class="col d-flex align-items-center">
      <button
        class="btn btn-sm btn-outline-secondary ml-auto d-flex align-items-center"
        @click.prevent="print_full"
      >
        <i class="mdi mdi-printer mr-1" /><small>{{btn_labels.print}}</small>
      </button>
    </div>
  </div>
  <ErmittlungDerHochstgrenzen ref="ermit" />
  <WeitereBerechnungsgrundlagen class="my-3 pagebreak-after" ref="weitere" />
  <ErmittlungAnerkannterHilfebedarf
    class="adjust_on_print"
    ref="ermit_annerkanter"
  />
</div>
<div :class="{'no-print':this.print}">
  <div class="print_header">
    <p>{{claim_info.Insurance_number}}</p>
    <p>{{claim_info.First_name}} {{claim_info.Last_name}}</p>
  </div>
  <div class="print_footer">
    <span class="mr-auto">Footer here</span>
    <span class="mx-auto"
      >{{claim_info.First_name}} {{claim_info.Last_name}}</span
    >
    <span class="ml-auto counter">{{claim_info.Date | moment('L')}}</span>
  </div>
</div>