vue 3 typescript how to make an object inside a class reactive

Question

I am trying to update a field of an object in an array within a class when a dropdown is selected. It seems to be updating on the console but not on display.

This is the class model:

export class HouseInvoice{
    public items:InvoiceItem[] =[];// this is an interface
    
    public static map(obj:{[key:string]:any}):HouseInvoice{
        const houseInvoice = new HouseInvoice();
        houseInvoice.items = obj.items ?? [];
        return houseInvoice;
    }

}

I make the class reactive like this:

let houseInvoice = reactive(new HouseInvoice());

Then i am trying to update the mItem.desc field in one of the items within the main class instance houseInvoice when mItem.name of that same item in the array is changed:

<Table.Tbody>
                  <Table.Tr v-for="(mItem, itemKey) in houseInvoice.items" :key="itemKey">
                    
                    <Table.Td>
                      <div v-if="storedItems.items">
                        <div class="mb-2">
                          <!-- @change="editItemData(itemKey,mItem.id)" -->
                <FormSelect
                  v-model="mItem.name"
                  @change="editItemData(itemKey, mItem.name)"
                  class="w-full"
                >
                <option value="">Select Item</option>
                  <option v-for="sItem in storedItems.items" :key="sItem.id" :value="sItem.id">{{sItem.name}}</option>
                </FormSelect>
              </div>
              <div class="input-form" style="width: 120px;">
<!-- Trying to update this automatically -->
                <FormInput
                v-model="mItem.desc"
                  type="text"
                  placeholder="food and clothes"
                />
              </div>
                      </div>
                      
                    </Table.Td>
...

This is editItemData function:

 const editItemData = (index:number, selectedId:string) =>{
  console.log("index", index);
  console.log("selectedId", selectedId);
  let selectedItem = storedItems.items.find((element)=> element.id == selectedId);
  
  if(selectedItem){

    houseInvoice.items[index].desc = selectedItem.desc ?? "test"; <-- this doesnt update the DOM, but it shows correctly in console.

    // i have tried many things:
    
    // houseInvoice.value.items[index].changeDesc();
    // houseInvoice.items = [mItem];
    
    // methodThatForcesUpdate();
    // console.log("houseInvoice.value:", houseInvoice.value.items);
    // console.log("houseInvoice.items[index]:", houseInvoice.items[index].desc);
    // houseInvoice.value.items.splice(index, 1);
    // houseInvoice.value.items.push(mItem);
    // methodThatForcesUpdate();
    // houseInvoice.value.items.splice(index, 1, mItem);
    // houseInvoice.value.items.push(mItem)
    // setTimeout(() => houseInvoice.value.items.splice(index, 1), 500);
    
  }
  
 }

This is how i add a new item to the array:

const addNewItem = () =>{
  console.log("adding new item");
  let invoiceItem:InvoiceItem = reactive({
    weight: 0,sku: "", id: "",
    name: "", desc: "", height: 0, width: 0,
    length: 0, qty: 1, cubes:0, total: 0
  });
  houseInvoice.items.push(
    invoiceItem
  )
}

I added a picture to help explain. When the drop down list is selected, some text should show up in the bottom text field. What happens is the dom is never updated and nothing shows up in the text field.

Any help would be much appreciated.