Default sorting arrow not shown when backend sorting is enabled

[tecaz]

Overview of the problem

Buefy version: 0.8.20
Vuejs version: 2.6.11
OS/Browser: any

Description

A BTable with backend-sorting enabled won't show the initial default sorting arrow.
The arrows do show up correctly when the user changes the default sorting.

Steps to reproduce

Minimal working example:

<b-table :data="[{ }]"
         :default-sort="[ 'field1', 'asc' ]"
         :backend-sorting="false">
    <b-table-column label="Field1" field="field1" sortable>
        Value1
    </b-table-column>
    <b-table-column label="Field2" field="field2" sortable>
        Value2
    </b-table-column>
</b-table>

With :backend-sorting="false" the default sorting arrow is shown:

With :backend-sorting="true" the arrow disappears (until the user changes the sorting):

[lgarczyn]

Same issue, resolved using multi-sorting with a limit of 1 sort, unfortunately you cannot remove the '1' next to the chevron easily

[lgarczyn]

Here's my current workaround:

<b-table
            sort-multiple
            :sort-multiple-data="[{field:orderBy, order:orderDir}]"
            @sort="onSort"
            @sorting-priority-removed="onSortRemoved"
/>

    onSort(field: string, order: string): void {
        this.page = 1;
        this.orderBy = field;
        this.orderDir = order;
        this.route();
    }

    onSortRemoved(): void {
        this.onSort(defaultOrderBy, defaultOrderDir);
    }

You can remove the '1' using css:

.your-container /deep/ .is-sortable > div {
	color: transparent;
}
.your-container /deep/ .is-sortable > div > span{
	color: #363636;
}

The one advice that was given last time this was posted was to call 'defaultSort' after setting the prop, but it didn't work for everyone, even after waiting one frame

As everyone can see, this is not ideal