LWC Picklist Values are not updating in UI

 Recently, we ran into one issue with lwc component. We are trying to add one object to array using array.push method. Its adding that object to that array, but it's not updating the value at UI. 

Here is an example component with workaround for the issue.

LWC array not updating in UI

PicklistNotUpdateUI.html

<template>
    <lightning-combobox name="Fruits"
                        label="Fruits"
                        options={fruitsOptionsList}
                        onchange={handleChange}>
    </lightning-combobox>
    <lightning-button label="add cherry" onclick={addCherry}></lightning-button>
    <lightning-button label="add Orange" onclick={addOrange}></lightning-button>
</template>

PicklistNotUpdateUI.js

import { LightningElement, track } from 'lwc';

export default class PicklistNotUpdateUI extends LightningElement {
    @track fruitsOptionsList = [ { label: 'apple', value: 'apple'},
                                 { label: 'banana', value: 'banana'}];

    addOrange(){
        //It will actually adds object to array, but in UI its won't update
        this.fruitsOptionsList.push({label: 'Orange', value: 'Orange'});
        console.log(this.fruitsOptionsList);// here in log showing, but not updating in UI
    }

    addCherry(){
        let cherryFuit = {label: 'cherry', value: 'cherry'};
        // this is the workaround to update UI 
        this.fruitsOptionsList = [...this.fruitsOptionsList, cherryFuit];
    }
}

PicklistNotUpdateUI.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Results screenshot:

Also found above code in Tech Shorts Git repo