Table/Data Collection not refreshing as expected

I’m trying to run the below function whenever a user navigates to the page. The function rankLeaderboard() should do just as it suggests. It queries a data collection and ranks the rows in the data collection accordingly. Unfortunately the table (#tableSelfTapeMayLeaderboard) does not refresh unless I physically click the web browser refresh button, or navigate away from the page and go back. I can see that the data is updated in the data collection in “real time” so I’m perplexed as to why the table refresh is not taking place as expected. Thank you in advance for your assistance with this!

import wixData from ‘wix-data’ ;

$w . onReady ( async function () {
// Write your JavaScript here

// To select an element by ID use: $w('#elementID') 

// Click 'Preview' to run your code 
**await**  rankLeaderboard (); 

$w ( "#datasetSelfTapeMayParticipation" ). refresh () 
    . then ( () => { 
    console . log ( "Done refreshing the dataset" ); 
    $w ( "#tableSelfTapeMayLeaderboard" ). refresh (); 
    console . log ( "tableSelfTapeMayLeaderboard should be refreshed." ); 

} );
});

function rankLeaderboard ( ) {

wixData . query ( "SelfTapeMayParticipationData" ) 
    . descending ( "selfTapes" ) 
    . ascending ( "selfTapesUpdateDate" ) 
    . find () 
    . then ( ( results ) => { 
        **if** ( results . items . length  >  0 ) { 
            **for** ( **let**  i  =  0 ;  i  <  results . items . length ;  i ++) { 
                **let**  item  =  results . items [ i ]; 
                item . leaderBoardRank  =  i  +  1 ; 
                wixData . update ( "SelfTapeMayParticipationData" ,  item ); 
            } 
        }  **else**  { 
            // handle case where no matching items found 
        } 
    } ) 
    /*.then( () => { 
        $w("#datasetSelfTapeMayParticipation").refresh(); 
        $w("#tableSelfTapeMayLeaderboard").refresh(); 
    })*/ 

}