How to create a dynamic chart using ember-vega

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
            };
        })
    };
})