How to create a dynamic chart using ember-vega - ember.js

Question

Im trying to create a vega chart in an ember octane app but in doing so im able to render the chart once, but from then on, even if the values change, the chart doesn't get rerendered
the code im using is
component.ts
#tracked
model!: any;
get chartData() {
const data = this.model.data;
return {
table: data.map((datum: any) => {
return {
...datum
};
})
};
}
chart.hbs
{{vega-vis spec=this.spec data=this.chartData}}
why isn't it not working, but at the same time
doing set(this,"dataSource",this.model.data) works
dataSource: computed(function() {
return emberArray([
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]);
}),
data: computed('dataSource.{[],#each.amount}', function () {
const dataSource = get(this, 'dataSource');
return {
table: dataSource.map((datum) => {
// return a copy because Vega Vis will mutate the dataset.
return {
...datum
};
})
};
})