searchApts.html

  <div class="col-12 col-md-10 col-lg-7">
    <div class="input-group my-3">
      <input
        id="SearchApts"
        placeholder="Search"
        type="text"
        class="form-control"
        aria-label="Search Appointments"
      >

      <div class="input-group-append">
        <button
          type="button"
          class="btn btn-primary dropdown-toggle"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          Sort by
          <span class="caret"></span>
        </button>

        <div class="dropdown-menu dropdown-menu-right">
          <a href="#" class="dropdown-item d-flex justify-content-between" id="petName">
            Pet Name
            <font-awesome-icon icon="check"/>
          </a>

          <a class="dropdown-item d-flex justify-content-between" href="#" id="aptDate">
            Date
            <font-awesome-icon icon="check"/>
          </a>

          <a href="#" class="dropdown-item d-flex justify-content-between" id="ownerName">
            Owner
            <font-awesome-icon icon="check"/>
          </a>

          <div class="dropdown-divider" role="separator"></div>

          <a
            class="dropdown-item d-flex justify-content-between"
            href="#"
            id="asc"
          >
            Asc
            <font-awesome-icon icon="check"/>
          </a>

          <a
            class="dropdown-item d-flex justify-content-between"
            href="#"
            id="desc"
          >
            Desc
            <font-awesome-icon icon="check"/>
          </a>
        </div>
      </div>
    </div>
  </div>

this link is wrong. You referred it on
https://www.linkedin.com/learning/vue-js-building-an-interface-2/adding-records-templates
fix for others.

You can get the code here: https://github.com/planetoftheweb/vue-interface/blob/04_04b/src/components/AddAppointment.vue

Note: It contains the template, script and style sections.