Vue 3 Composition API Issue with DataSource of DxDataGrid setting columns

Question

Cannot view the grid using dxDataGrid if i add the columns attribute on dxDataGrid with Vue 3 composition API.

My code is somothing similar to this:

<template>
  <dx-data-grid
    :columns="state.columnsEvaluated"
    :dataSource="state.dataSourceEvaluatedFromWrapper"
  >
  </dx-data-grid>
</template>

<script setup lang="ts">
import { DxDataGrid } from 'devextreme-vue';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import { reactive} from 'vue'

 let dataSourceEvaluatedFromWrapper = createStore({
    loadUrl: `${url}/<controller>/Load`,
    insertUrl: `${url}/<controller/Insert`,
    updateUrl: `${url}/<controller/Update`,
    deleteUrl: `${url}/<controller/Delete`,
    onBeforeSend: (method, ajaxOptions) => {
      ajaxOptions.xhrFields = { withCredentials: true };
    },
  });

let modifiedColumns : any = [];

const state = reactive({
  columnsEvaluated: modifiedColumns,
  dataSourceEvaluatedFromWrapper: dataSourceEvaluatedFromWrapper
  });

const columnsToRemove = ref(["columnNameToBeRemoved"]);

dataSourceEvaluatedFromWrapper.load().then(async (res : any) => {  
    for (const field in res[0]) {
    if (!columnsToRemove.value.includes(field)) {
      modifiedColumns.push({ dataField: field });
    } 
  }
});

</script>

a Sandbox of the problem -> https://codesandbox.io/s/web-api-service-devextreme-data-grid-forked-kqloix?file=/App.vue

When i delete the columns attribute the DOM is modified and reload the page and this code is working, if the page is loaded and then i add in my code the :columns attribute this is working. But if i reload the page for the first time with all the code this isn't working.