checkbox on vue with element-ui cant checked

Im new with vue and element ui. Expected: I want to make dialog with input and checkbox components for add and edit.

Problem : Until now edit dialog run normal, create dialog also normal. (except the checkbox area). checkbox on create dialog have strange habit cant checked that easy. I need to do these step first so the box is checked.

1. click on the box (click for image)

2. type or delete something on the input, after that the checked show up (click for image)

and i dont have problem with save function. result on table (image)

here is my code...

<el-dialog :title="$t(`label.exchange`)" :visible="dialogShown == 'editingExchange' || dialogShown == 'newExchange'" @close="closeDialog">
   <el-form label-position="top" :inline="true" size="mini" :model="editingExchange">
     <el-form-item :label="$t('label.code')">
       <el-input :disabled="dialogShown == 'editingExchange'" v-model="editingExchange.code"></el-input>
     </el-form-item>
     <el-form-item :label="$t('label.name')">
       <el-input v-model="editingExchange.name"></el-input>
     </el-form-item>
      <el-form-item v-show="dialogShown == 'editingExchange' || dialogShown == 'newExchange'" :label="$t('header.orderTypes')">
       <el-checkbox-group v-model="editingExchange.orderTypes">
         <el-checkbox v-for="type in allTypes" :label="type.key" :key="type.key"></el-checkbox>
       </el-checkbox-group>
     </el-form-item>
   </el-form>
   <div slot="footer">
     <el-button icon="el-icon-close" size="mini" type="info" @click="closeDialog"></el-button>
     <el-button icon="mdi-content-save" size="mini" type="primary" :loading="saving" @click="saveExchange"></el-button>
   </div>
</el-dialog>

<script>
import HeaderSetting from '@/components/HeaderSetting'
import {
  getColMinWidth,
  getColAlign,
  headerSettings,
  formatters
} from '../components/headers.js'
import {
  Pager,
  EnumTypes
} from '../components/ttypes.js'
import {
  interval0,
  pageSizes,
  defPageSize
} from '@/components/config.js'
import {
  mapGetters
} from 'vuex'
export default {
  name: "Exchange",
  directives: {
    waves
  },
  components: {
    Sticky,
    HeaderSetting
  },
  data: () => ({
    EnumTypes: EnumTypes,
    formatters: formatters,
    pageSizes: pageSizes,
    exchangeLoading: false,
    exchangePager: new Pager(),
    exchangeHeaders: headerSettings.exchangeHeaders,
    reflushInterval: null,

    allTypes: [],
    headerSettings: {
      key: 'exchangeHeaders',
      value: headerSettings.exchangeHeaders
    },
    dialogShown: false,
    editingExchange: {},
    saving: true
  }),
  computed: {
    pageSizeIndex(){
      return `exchangePageSize`;
    },
    pageSize(){
      return this.exchangePager.pageSize;
    }
  },
  methods: {
    getColAlign: getColAlign,
    getColMinWidth: getColMinWidth,
    getPageSize() {
      this.$socket.emit('getPageSize', this.pageSizeIndex);
    },
    changePageSize(pageSize) {
      this.$socket.emit('setPageSize', this.pageSizeIndex, pageSize);
      this.exchangePager.pageSize = Number(pageSize);
      this.changeExchangeCurPage(1);
    },
    populateTypes() {
      var types = EnumTypes['orderType'];
      for (var obj in types) {
        this.allTypes.push({
          key: parseInt(obj),
          label: types[obj],
          disabled: false
        });
      }
    },
    getHeaderSettings() {
      this.$socket.emit('getHeaderSettings', ['exchangeHeaders']);
    },
    saveHeaderSetting() {
      this[this.headerSettings.key] = this.headerSettings.value;
      this.$socket.emit('setHeaderSetting', this.headerSettings.key, JSON.stringify(this.headerSettings.value));
      this.closeDialog();
    },
    closeDialog() {
      this.dialogShown = false;
      this.saving = false;
      this.getExchanges();
    },
    getExchanges(){
      this.getExchanges(this.exchangePager.curPage);
    },

    getDetails(id) {
      this.editingExchange = jsonCopy(this.exchangePager.items[id])
      this.dialogShown = 'showOrderTypes';
    },
    create() {
      this.editingExchange = {}
      this.editingExchange.orderTypes = []
      this.dialogShown = 'newExchange';
    },
    changeExchangeCurPage(curPage) {
      this.dialogShown = false;
      this.getExchanges(curPage);
    },
    getExchanges(curPage) {
      this.$socket.emit('getExchanges', this.exchangePager.curPage, this.pageSize);
    },
    editExchange(id) {
      this.editingExchange = jsonCopy(this.exchangePager.items[id])
      this.dialogShown = 'editingExchange';
    },
    saveExchange() {
      this.$socket.emit('saveExchange', this.editingExchange);
    },
    deleteExchange(code) {
      this.$confirm('Are you sure want to delete Exchange: ' + code + '?', 'Delete confirmation', {
        type: 'warning'
      }).then(() => {
        this.$socket.emit('deleteExchange', code);
        this.$message({
          type: 'success',
          message: 'Delete completed'
        });
        this.getExchanges();
      });
    }
  },
  socket: {
    events: {
      getExchanges(pager, curPage) {
        if (this.exchangePager.curPage == curPage) {
          this.exchangePager.pageSize = Number(pager.pageSize);
          this.exchangePager.total = pager.total;
          this.exchangePager.curPage = pager.curPage;
          this.exchangePager.items = pager.items;
          this.reflush();
        }
      },
      getHeaderSettings(options) {
        for (let option of options) {
          if (option && option.key && this[option.key]) {
            try {
              this[option.key] = JSON.parse(option.value);
            } catch (err) {
              console.log(err);
            }
          }
        }
      },
      save(status) {
        if (status) {
          this.closeDialog()
        } else {
          this.saving = false;
        }
      },
      getPageSize(pageSize) {
        if(pageSize){
          this.exchangePager.pageSize = Number(pageSize);
        }
        else {
          this.exchangePager.pageSize = defPageSize;
        }
        this.changeExchangeCurPage(1);
      }
    }
  },
  created() {
    //do something after creating vue instance
    this.getHeaderSettings();
    this.populateTypes();
    this.getPageSize(this.pageSizeIndex);
    this.getExchanges();
  }
}
</script>

Please comment if you have some solution. Thank you :)