I wanted the value of the data-field of the parent column to be maintained without changing the column original order (because later I will use a v-for for several columns and only some will be visible through the switch).

<template>
  <div>

      <label>
      <input type="checkbox" v-model="showColumn" /> Show columns
    </label>

    <DxDataGrid
      id="gridContainer"
      :data-source="employees"
      key-expr="ID"
      :allow-column-reordering="true"
      :allow-column-resizing="true"
      :column-auto-width="true"
      :show-borders="true"
    >
      <DxColumnChooser :enabled="true" />
      <DxColumnFixing :enabled="true" />
      <DxColumn
        :width="230"
        :fixed="true"
        :calculate-cell-value="calculateCellValue"
        caption="Employee"
      />
      <DxColumn caption="Test" data-field="BirthDate" data-type="date">
        <DxColumn :visible="showColumn" data-field="BirthDate" data-type="date" />
        <DxColumn :visible="showColumn" data-field="HireDate" data-type="date" />
      </DxColumn>

    </DxDataGrid>
  </div>
</template>

<script setup>
import {
  DxDataGrid,
  DxColumn,
  DxColumnChooser,
  DxColumnFixing,
} from 'devextreme-vue/data-grid';
import { employees } from './data';
import { ref } from 'vue';

const showColumn = ref(true);

function calculateCellValue(data) {
  return [data.Title, data.FirstName, data.LastName].join(' ');
}
</script>

<style scoped>
#gridContainer {
  height: 440px;
}
</style>

DEMO: https://2f5r64.csb.app/