Improves with some refacotoring

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -34,7 +34,6 @@ import Tracking from '~/tracking';
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-bg-blue-50 gl-hover-cursor-pointer gl-hover-border-b-solid gl-hover-border-blue-200';
-const findDefaultSortColumn = () => document.querySelector('.js-started-at');
 
 const initialPaginationState = {
   currentPage: 1,
@@ -193,6 +192,8 @@ export default {
       statusFilter: [],
       filteredByStatus: '',
       pagination: initialPaginationState,
+      sortBy: 'startedAt',
+      sortDesc: true,
     };
   },
   computed: {
@@ -229,9 +230,6 @@ export default {
   },
   mounted() {
     this.trackPageViews();
-    if (this.alertManagementEnabled) {
-      findDefaultSortColumn().ariaSort = 'descending';
-    }
   },
   methods: {
     filterAlertsByStatus(tabIndex) {
@@ -244,9 +242,6 @@ export default {
       const sortDirection = sortDesc ? 'DESC' : 'ASC';
       const sortColumn = convertToSnakeCase(sortBy).toUpperCase();
 
-      if (sortBy !== 'startedAt') {
-        findDefaultSortColumn().ariaSort = 'none';
-      }
       this.resetPagination();
       this.sort = `${sortColumn}_${sortDirection}`;
     },
@@ -347,6 +342,8 @@ export default {
         stacked="md"
         :tbody-tr-class="tbodyTrClass"
         :no-local-sorting="true"
+        :sort-desc.sync="sortDesc"
+        :sort-by.sync="sortBy"
         sort-icon-left
         @row-clicked="navigateToAlertDetails"
         @sort-changed="fetchSortedData"

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -91,10 +91,7 @@ describe('AlertManagementList', () => {
     });
   }
 
-  const mockStartedAtCol = {};
-
   beforeEach(() => {
-    jest.spyOn(document, 'querySelector').mockReturnValue(mockStartedAtCol);
     mountComponent();
   });
 
@@ -352,14 +349,6 @@ describe('AlertManagementList', () => {
 
       expect(wrapper.vm.$data.sort).toBe('SEVERITY_DESC');
     });
-
-    it('updates the `ariaSort` attribute so the sort icon appears in the proper column', () => {
-      expect(mockStartedAtCol.ariaSort).toEqual('descending');
-
-      findSeverityColumnHeader().trigger('click');
-
-      expect(mockStartedAtCol.ariaSort).toEqual('none');
-    });
   });
 
   describe('updating the alert status', () => {