How to re render component when the argument changes from the table component in Ember.js?

Question

Im a beginner in Ember.js framework, and Im having trouble updating a component from another one.

I have this table component with the checkbox rows, and everytime the number of checked rows its updating I need to update a button in another component.

This is the code for the table and also in this code its called the component that I need to change MultiGiftAllocationForm

        <table class="table table-sm mb-lg" role="table">
            <thead>
              <tr>
                <th>Donor</th>
                {{#unless (or this.hasOneChecked this.hasMultipleChecked)}}
                  <th>Fund
                  </th>{{/unless}}

                <th>Check #</th>
                <th class="!pl-0 !text-right">Amount</th>
              </tr>
            </thead>
            <tbody>
              {{#each this.allocatedGifts as |row|}}
                <tr>
                  <td class="!pr-0">
                    <div class="flex items-center justify-start">
                      <span
                        class="mr-sm h-[8px] w-[8px] rounded-full bg-y400"
                      ></span>
                      <KitCheckbox
                        @click={{fn this.updateCheckedRows row}}
                        @checked={{row.isChecked}}
                        @classNames="checkbox mr-md"
                      />
                      <span>{{row.donor}}</span>
                    </div>
                  </td>
                  {{#unless (or this.hasOneChecked this.hasMultipleChecked)}}
                    <td>
                      <div>{{row.fund}}</div>
                    </td>
                  {{/unless}}
                  <td>{{row.checkNumber}}</td>
                  <td class="!pl-0 text-right">
                    {{format-currency row.amount}}
                  </td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </div>
      <div
        class={{concat
          (if
            (or this.hasOneChecked this.hasMultipleChecked)
            " col-span-3"
            " col-span-2"
          )
        }}
      >
        {{#if this.hasMultipleChecked}}
          <GiftEntry::MultiGiftAllocationForm
            @giftsNumber={{this.selectedGifts}}
          />

and the ts file for this code

import Controller from '@ember/controller';
import { action, set } from '@ember/object';
import RouterService from '@ember/routing/router-service';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import config from 'giving/config/environment';
import UnleashService from 'giving/services/unleash';

export interface MockDataAllocationRow {
  id: number;
  donor: string;
  fund: string;
  checkNumber: string;
  amount: number;
  isChecked: boolean;
}

export default class OrgGiftEntryIndexController extends Controller {
  // -------------------------------------------------------------------------
  // Dependencies

  @service router: RouterService;
  @service unleash: UnleashService;

  // -------------------------------------------------------------------------
  // Properties

  // table state
  @tracked hasOneChecked = false;
  @tracked hasMultipleChecked = false;
  @tracked selectedGifts: MockDataAllocationRow[] = [];

  // table arrays
  @tracked allocatedGifts: MockDataAllocationRow[] = [
    {
      id: 1,
      donor: 'Beatrice Brito',
      fund: 'Building',
      checkNumber: '5045',
      amount: 300,
      isChecked: false,
    },
    {
      id: 2,
      donor: 'Lisanne Viscaal',
      fund: 'Assign a fund',
      checkNumber: '5045',
      amount: 300,
      isChecked: false,
    },
  ];
  @tracked unallocatedGifts: MockDataAllocationRow[] = [
    {
      id: 3,
      donor: 'Assign a donor',
      fund: 'Two funds',
      checkNumber: '1506',
      amount: 15,
      isChecked: false,
    },
    {
      id: 4,
      donor: 'Assign a donor',
      fund: 'Assign a fund',
      checkNumber: '1013',
      amount: 85.24,
      isChecked: false,
    },
    {
      id: 5,
      donor: 'Assign a donor',
      fund: 'Assign a fund',
      checkNumber: '5045',
      amount: 300,
      isChecked: false,
    },
    {
      id: 6,
      donor: 'Assign a donor',
      fund: 'Assign a fund',
      checkNumber: '5045',
      amount: 300,
      isChecked: false,
    },
  ];
  @tracked needsReviewGifts: MockDataAllocationRow[] = [
    {
      id: 7,
      donor: 'Beatrice Britana',
      fund: 'Assign a fund',
      checkNumber: '5045',
      amount: 300,
      isChecked: false,
    },
    {
      id: 8,
      donor: 'Lisanne Vischer',
      fund: 'Assign a fund',
      checkNumber: '5045',
      amount: 300,
      isChecked: false,
    },
    {
      id: 9,
      donor: 'Warren Kindler',
      fund: 'Assign a fund',
      checkNumber: '5045',
      amount: 300,
      isChecked: false,
    },
    {
      id: 10,
      donor: 'Carole Chimako',
      fund: 'Assign a fund',
      checkNumber: '5045',
      amount: 300,
      isChecked: false,
    },
  ];

  // -------------------------------------------------------------------------
  // Getters / Setters

  // -------------------------------------------------------------------------
  // Events

  // -------------------------------------------------------------------------
  // Actions

  /** Route to batches if they don't have the bulk check scan unleash flag. */
  @action
  checkUnleash(): void {
    if (!this.unleash.bulkCheckScan && config.environment !== 'local') {
      this.router.transitionTo('org.batches');
    }
  }

  /** Simple toggle on/off of checkboxes while data is not real. */
  @action
  updateCheckedRows(row: MockDataAllocationRow, evt: Event): void {
    evt.preventDefault();

    const clickedElementIndex = this.selectedGifts.findIndex(
      (g) => g.id === row.id
    );

    if (clickedElementIndex > -1) {
      // item is already checked; uncheck it and remove from tracking array
      set(this.selectedGifts[clickedElementIndex], 'isChecked', false);
      this.selectedGifts.splice(clickedElementIndex, 1);
    } else {
      // item is not checked; check it and add to tracking array
      const selectedGiftsLength = this.selectedGifts.length;
      this.selectedGifts.push(row);
      set(this.selectedGifts[selectedGiftsLength], 'isChecked', true);
    }

    this.hasOneChecked = this.selectedGifts.length === 1;
    this.hasMultipleChecked = this.selectedGifts.length > 1;
  }

  // -------------------------------------------------------------------------
  // Methods
}

And the component that I want to update MultiGiftAllocationForm everytime the checked list its updating this button value should be updated to <button class="btn btn-primary ml-md" type="button"> Update {{@giftsNumber.length}} gifts </button> The code component

<div class="lg frame">
  <label class="text-base font-semibold text-n900">Allocate gifts</label>
  <label class="mb-xs mt-md block text-n500">
    Campus
  </label>
  <select id="campus" class="select mb-lg">
    <option selected disabled>--</option>
  </select>

  <div class="mb-lg">
    <label class="mb-xs block text-n500" for="fund">
      Fund
    </label>
    <select id="fund" class="select">
      <option selected disabled>--</option>
    </select>
  </div>
  <div class="mb-lg">
    <label class="mb-xs block text-n500" for="fund">
      Date received
    </label>
    <waves-date-picker value="11/15/2023"></waves-date-picker>
  </div>
  <div class="flex justify-end">
    <button class="btn" type="button">
      Cancel
    </button>
    <button class="btn btn-primary ml-md" type="button">
      Update
      {{@giftsNumber.length}}
      gifts
    </button>
  </div>
</div>

The ts file :

import Component from '@glimmer/component';

type Args = {
  // batch?: Batch | null;
  // onBatchSaved(batch: Batch): void;
  // onCancel(): void;
  giftsNumber: number;
};

/** Right sidebar form when 2 or more gifts are selected, to allocate fund, campus, and date */
export default class MultiGiftAllocationForm extends Component<Args> {
 
}