Why is my data reactively changing in props?

Question

Vue.js

Who can tell me why props are changing in my component? Although I change other data that is in data and do not emit it.
Here is my implementation on the site https://pyvjxxnnvj.codesandbox.io/#/employee . When you open a modal window and switch checkboxes, the table starts to change as well.
The component code itself

<template>
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper" @click.self="$emit('close')">
                <div :class="classModal">
                    <div class="modal-header" v-if="type !== 'employee'">
                        <div class="d-flex">
                            <div class="modal-header_text">
                                <slot></slot>
                            </div>
                            <div class="close-icon">
                                <i class="material-icons" @click="$emit('close')">close</i>
                            </div>
                        </div>
                     
                    </div>
                    <div :class="['modal-body']">                     
                            <div class="row field-column" v-for="(field, index) in columns">
                                <div class="col-sm-10 d-flex justify-content-between">
                                    <label :for="field.name">{{ field.label }}</label>
                                    <span class="icon-draggable">
                                        <i class="material-icons">more_vert</i>
                                        <i class="material-icons">more_vert</i>
                                    </span>
                                </div>
                                <div class="col-sm-2">
                                    <input
                                            :id="field.name"
                                            type="checkbox"
                                            class="checkbox-custom"
                                            v-model="field.disabled"
                                            @click="actionColumns(field.name, index)"
                                    />
                                </div>
                            </div>
                      
                    </div>

                    <div class="modal-footer" v-if="type === 'columns'">
                        <button
                                class="modal-default-button btn btn-primary"
                        >Применить</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import tabs from './tabs.vue'
    export default {
        name: "modal",
        props: ["items", "type"],
        data() {
            return {
                selected: {},
                columns: [],
            }
        },
        methods: {
            actionColumns(name, index) {
                this.selected[name] = !this.selected[name];
                this.remove = false;
                this.select = false;
            },
        },
        created() {
            let props = this.$props;
            if (props.type === 'columns') {
                for (let i = 1; i < props.items.length; i++) {
                    let item = props.items[i];
                    this.columns.push(item)//Добавляем все данные в columns, кроме 0 индекса.
                }
            }
        },
    };
</script>

All code https://codesandbox.io/s/pyvjxxnnvj /scr/components/ModalComponent.vue
View which calls this modal window /scr/views/App.vue

Answer 1

i change other data

It seems so to you. Whatever it seems, you need to fill in the gaps in the knowledge of the basics of js .
If you want it not to change - cut out created, set columns as the initial value

this.type === 'columns'
  ? this.items.slice(1).map(n => ({ ...n }))
  : []