cell formating not working

Expected behavior

The expected behavior is like the docs: https://mdbootstrap.com/docs/vue/data/datatables/#section-cell-formatting

Actual behavior

When I change the example code from const to ref, it doesn't work any more.

const dataset11 = ref({ ....});

Is there any workaround for this?

Code example

setup( ) {

const dataset11 = ref({
  rows: [
    ["Product 1", 10, 103],
    ["Product 2", 45, 110],
    ["Product 3", 76, 56],
    ["Product 4", 89, 230],
    ["Product 5", 104, 240],
    ["Product 6", 97, 187],
    ["Product 7", 167, 130],
    ["Product 8", 50, 199],
    ["Product 9", 4, 206],
    ["Product 10", 120, 88],
    ["Product 11", 22, 100]
  ]
});

const maxValue = Math.max(...dataset11.value.rows.map(row => row[2]));
const minValue = Math.min(...dataset11.value.rows.map(row => row[2]));
const colors = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5"];
const step = (maxValue - minValue) / (colors.length - 1);
const format = computed(() =>
    dataset11.value.rows.map(row => {
      const colorIndex = Math.floor((row[2] - minValue) / step);
      return {
        backgroundColor: colors[colorIndex],
        fontWeight: 400
      };
    })
);

dataset11.value.columns = [
  { label: "Product", field: "product" },
  { label: "Quantity", field: "quantity" },
  { label: "Purchases", field: "purchases", format }
];

return {
  dataset11
};

}