BTable: sort direction icons are not set properly when using no-local-sorting and sortKey

[paulgv]

Describe the bug

When rendering a BTable with no-local-sorting and custom sort keys defined as sortKey in the fields array, the sorting direction icons are not set properly in the table header.

Steps to reproduce the bug

1. Create a basic BTable which receives sorted items. At least one field should have a custom sortKey, and no-local-sorting should be set.
2. Try sorting by one of the fields that have a custom sortKey.
3. Notice how sorting direction icons are not updated in the header.

Expected behavior

The sorting direction icons should be properly updated, regardless of whether the field defined a custom sortKey or not.

Versions

Libraries:

• BootstrapVue: 2.21.2
• Bootstrap: 4.5.3
• Vue: 2.6.12

Demo link

Here's a small repro: https://jsfiddle.net/paulgv/4u19v80o/
When sorting by first name or age, everything seems to be working properly because those fields are not using a custom sortKey. However, notice how sorting by last name does result in the items sorting being updated properly, but the icon in the Last name header is not updated.

Additional context

Custom sortKey	Default sort key

[aleksandertabor]

The problem is that when sorting attribute aria-sort of column header is not changing to ascending or descending. It's still none. Sorting icons change bases on this attribute.

This error also occurred for me. I have temporarily changed to not use sortKey but dynamically change key before calling to API or you can do it on the backend.

Versions

Libraries:

BootstrapVue: 2.21.2
Bootstrap: 4.5.3
Vue: 2.6.12

[Hiws]

Hello, could you confirm that it's working correctly in the following codesandbox?
https://codesandbox.io/s/bootstrapvue-starter-project-forked-3b7pt?file=/App.vue

[aleksandertabor]

Hello, could you confirm that it's working correctly in the following codesandbox?
https://codesandbox.io/s/bootstrapvue-starter-project-forked-3b7pt?file=/App.vue

Confirmed. It's working.

Proof: