typescript - Vue fetch response.json promise not creating reactive getters -

i have vue application written typescript , i'm using fetch retrieve data api. in 1 of components have following interface defined:

interface searchresult {     device_id: string;     location: string;     sub_location: string;     status: string; } 

in fetch method cast response.json() promise array of searchresult interface so:

fetch(url).then(response => response.json() promise<searchresult[]>)           .then(data => {                this.results = data;            }) 

the issue have is, if 'status' not included in response.json(), no reactive getter created this.results.status, meaning can't mutate data , have react on page.

i tried manually setting value of 'status' after line this.results = data, , when inspect object using vuetools can see has status property value assigned it. reactive getter , setter still missing.

i tried changing interface class constructor set default value 'status', failed create reactive getter , setter property.

how can create reactive getters , setters without explicitly adding 'status' (or other arbitrary properties) api response?

vue cannot detect properties added object has been added data unless add property via $set.

change fetch response to:

fetch(url)   .then(response => response.json() promise<searchresult[]>)   .then(data => {      this.results = data;      (let result of this.results)       this.$set(result, 'status', "some value");   }) 

though should able away with:

fetch(url)   .then(response => response.json() promise<searchresult[]>)   .then(data => {      this.results = data.map(d => d.status = "some value");    })