How to change html list order when a new element gets added to the list array in vue 3

Html list doesn’t show elements correctly in descending order after I add a new element to the array but works fine on onMount

I have an array to render as html list in descending order of the values. So I used v-for to do that.

After rendering the array, I need to add more elements one by one and these elements need to be added in correct order. so I used sort method.

Now the problem is the list doesn’t get rendered correctly after I add a new element to the array although sort method works fine. The correct order gets rendered only when I reload the component/page