I am trying to edit the checkbox using devextream for vue js code. But it is not editable.it is in readable format

See more:

vue.js

I have one data.js and App.vue.
I have used DevExtream to display UI. It is referring data.js for input
but the checkbox are in readable format. I want it in editable format.

What I have tried:

export const statuses = [{ 'id': 1, 'name': 'Not Started', 'profile':true }, { 'id': 2, 'name': 'In Progress', 'profile':true }, { 'id': 3, 'name': 'Deferred', 'profile':false }, { 'id': 4, 'name': 'Need Assistance', 'profile':true }, { 'id': 5, 'name': 'Completed', 'profile':true }];

<template>
  <DxDataGrid
    :data-source="statuses"
    :show-borders="true"
  >

    <DxEditing
      :allow-updating="true"
      :allow-adding="true"
      mode="cell"
    />
    <DxColumn
      :width="150"
      :allow-sorting="false"
      data-field="name"
    >

      <DxRequiredRule/>
    </DxColumn>
    <DxColumn
      :width="150"
      data-field="profile"
    >
         <DxCheckBox :value="false"/>
        <DxRequiredRule/>
      </DxColumn>
  </DxDataGrid>
</template>
<script>

import {
  DxDataGrid,
  DxPaging,
  DxHeaderFilter,
  DxSearchPanel,
  DxEditing,
  DxColumn,
  DxLookup,
  DxRequiredRule,
    DxCheckBox
} from 'devextreme-vue';
import { statuses } from './data.js';
App.vue: 
export default {
  components: {
    DxDataGrid,
    DxPaging,
    DxCheckBox,
    DxHeaderFilter,
    DxSearchPanel,
    DxEditing,
    DxColumn,
    DxLookup,
    DxRequiredRule
  },
  data() {
    return {

      statuses: statuses


    };
  },
  methods: {

  }
};
</script>
<style>
  .status-icon {
    height: 16px;
    width: 16px;
    display: inline-block;
    margin-right: 8px;
  }

  .middle {
    vertical-align: middle;
  }
</style>