LWC Object Array

helloWorld.css

.classy {
    background-color: pink;
}

helloWorld.html

<template>

    <h2>Hello World</h2>

    <ul>
        <template for:each={theList} for:item="listItem">
            <li key={listItem.id} class={listItem.styleClass}>
                {listItem.label}
            </li>
        </template>
    </ul>

    <button onclick={clickButton}>Style List</button>

</template>

helloWorld.js

import { LightningElement, track } from 'lwc';
import getList from '@salesforce/apex/Test.getList';

export default class HelloWorld extends LightningElement {

    // Works as Expected
    /*@track theList = [
        { id: 1, label: "Item 1" },
        { id: 2, label: "Item 2" },
        { id: 3, label: "Item 3" }
    ]*/

    // Does not work
    @track theList;
    connectedCallback() {
        console.log('load');
        getList()
            .then(result => { 
                console.log(JSON.stringify(result));
                this.theList = result; 
            });
    }

   clickButton(event) {
        console.log("click button");
        for (let i=0; i<this.theList.length; i++) {
            console.log(i);
            this.theList[i].styleClass = "classy";
        }
    }

}

Test.cls

public with sharing class Test {
    
  @AuraEnabled(cacheable=true)
	public static TestObj[] getList() {
      TestObj[] tests = new TestObj[]{ 
            new TestObj('1', 'Item 1'),
            new TestObj('2', 'Item 2'),
            new TestObj('3', 'Item 3')
       };
       return tests;
   }

    public class TestObj {

        @AuraEnabled public String id;
        @AuraEnabled public String label;
        @AuraEnabled public String styleClass {get; set;}

        public TestObj(String id, String label) {
            this.id = id;
            this.label = label;
            this.styleClass = '';
        }
    } 

}