model popup created. but trying to save selected checkbox values in text field as comma separated values(contacts title) not working and once saved when we refresh the page and open the popup up it should hold selected checkbox values.

HTML:
<template>
    <lightning-card>
       <lightning-layout vertical-align="start" class="layout-8">
          <lightning-layout-item>
             <lightning-button variant="brand-outline" label="TestModel" title="model primary" onclick={openModal}></lightning-button>
             <template if:true={isModalOpen}>
                <lightning-card>
                   <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                      <div class="slds-modal__container">
                         <header class="slds-modal__header">
                            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                               <lightning-icon icon-name="utility:close"
                                  alternative-text="close"
                                  variant="inverse"
                                  size="small" ></lightning-icon>
                               <span class="slds-assistive-text">Close</span>
                            </button>
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">countries/States/City/Place</h2>
                         </header>
                         <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                            <lightning-layout vertical-align="start" class="general-form-layout" multiple-rows="true">
                                <lightning-layout-item size="12" large-device-size="3.8" medium-device-size="4" small-device-size="6">
                                  <lightning-checkbox-group name="Countries"
                                     label="Countries"
                                     options={options}
                                     value={value}
                                     onchange={handleChange}></lightning-checkbox-group>
                                    
                                  <lightning-checkbox-group name="States"
                                     label="States"
                                     options={option1}
                                     value={value}
                                     onchange={handleChange}></lightning-checkbox-group>
                               </lightning-layout-item>
                               <lightning-layout-item size="12" large-device-size="3.8" medium-device-size="4" small-device-size="6">
                                <lightning-checkbox-group name="Cities"
                                     label="Cities"
                                     options={option2}
                                     value={value}
                                     onchange={handleChange}></lightning-checkbox-group>
                               </lightning-layout-item>
                               <lightning-layout-item size="12" large-device-size="4" medium-device-size="4" small-device-size="6">

                                  <lightning-checkbox-group name="Centals"
                                     label="Centals"
                                     options={option3}
                                     value={value}
                                     onchange={handleChange}></lightning-checkbox-group>
                                    
                               </lightning-layout-item>
                               <lightning-layout-item>
                               </lightning-layout-item>
                            </lightning-layout>
                                 <!--<lightning-input type="text" label="Title" value={selectedValues} onchange={nameInpChange}></lightning-input>-->

                         </div>
                         <footer class="slds-modal__footer">
                            <div class="slds-grid slds-grid_align-center">
                             <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                             <button class="slds-button slds-button_brand" onclick={submitDetails} title="OK">Save</button>
                            </div> 
                            </footer>
                      </div>
                   </section>
                </lightning-card>
                <div class="slds-backdrop slds-backdrop_open"></div>
             </template>
          </lightning-layout-item>
       </lightning-layout>
    </lightning-card>
 </template>

JS:
import { LightningElement, track } from 'lwc';
import insertModel from '@salesforce/apex/modelPopUP.insertModel';
import MODEL_FIELD from '@salesforce/schema/Contact.Title';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class Model extends LightningElement {
    @track popupid;
    @track error;    
    @track getPopUPRecord={
        Title:MODEL_FIELD
              
    }; 

 nameInpChange(event){
       this.getPopUPRecord.Type = event.target.value;
       //window.console.log(this.getAccountRecord.Name);
     }

submitDetails(){
        insertModel({ mdl : this.getPopUPRecord})
        .then(result =>{
            this.getPopUPRecord={};
            this.popupid=result.id;
            
            const toastEvent = new ShowToastEvent({
              title:'Success!',
              message:'Account created successfully',
              variant:'success'
            });
            this.dispatchEvent(toastEvent);
        })
        .catch(error=>{
           this.error=error.message;
           window.console.log(this.error);
        });
      }


 value = [];
    @track isModalOpen = false;

    openModal() {
        this.isModalOpen = true;
    }
    closeModal() {
        this.isModalOpen = false;
    }
    submitDetails() {
        this.isModalOpen = false;
    }

    get options() {
        return [
            { label: 'India', value: 'option1' },
            { label: 'USA', value: 'option2' },
            { label: 'SouthAfrica', value: 'option3' },
            { label: 'England', value: 'option4' }
        ];
    }
    get option1() {
        return [
            { label: 'California', value: 'option5' },
            { label: 'Maharastra - RTL', value: 'option6' },
            { label: 'Chicago - SIF', value: 'option7' },
            { label: 'Karnataka', value: 'option8' }
        ];
    }
 
    get option2() {
        return [
            { label: 'Mumbai', value: 'option9' },
            { label: 'London', value: 'option10' },
            { label: 'Pune', value: 'option11' },
            { label: 'Ahmadabad', value: 'option12' }
            
        ];
    }
    get option3() {
        return [
            { label: 'pondicerry', value: 'option13' },
            { label: 'Dallas', value: 'option14' },
            { label: 'goa', value: 'option15' },
            { label: 'Singapore', value: 'option16' }

            ];
           
    }

    handleChange(e) {
        this.value = e.detail.value;
    }
   get selectedValues() {
        return this.value.join(',');
    }
}

Apex:
public class modelPopUP {
@AuraEnabled
    public static void insertModel(Contact mdl){
        try{
            insert mdl;
            system.debug('Model'+mdl);
        }catch(Exception ex){
            throw new AuraHandledException(ex.getMessage());
        }
    }
}