How to convey LWC's complex Reactive property back to markup?

Going through the docs and based on a quick test it seems you can only track changes to the internal values on Arrays created with []. Seems push() does not have the same effect but assigning using [] notion is.

In summary, you will need to recreate the array and assign the values using [] notion.

I was able to get this working by utilizing it as below:

this.data = [
             this.data[0], 
             {name:'Mylabel2s' , website:'2google.com' ,phone :'74126478963',amount : 45 }
];

Well, I was able to fix this by using the ES6 Spread operator, which basically splits the array into the individual element and then recreate array...

addRow(){


        this.data = [...this.data ,{name:'Mylabel2s' , website:'2google.com' ,phone :'74126478963',amount : 45 } ];

    }

Playground link

Please avoid spread operators unless you really want to concatenate two arrays purposely, spread operators are O(n), which has an non negligible effect on performance.

The push() operation should be as observable as assigning a new array if the property is @track.

https://developer.salesforce.com/docs/component-library/tools/playground/V4r9CeGW/2/edit