Logic

1. I have checkboxes with inputs as label which values come from database so the text(value) is already exits. (done)
2. I want to make a list of checked items (done)
3. I want if I changed an item value get the changed value but it still gives me value of database (need help)

For better understanding here is some screenshots:

1

2

PS: If I change my input before checking the checkbox my value automatically jumps to default value (DB value)

Code

<template>
    <div class="input-group mb-3 active" v-for="(value, key, index) in list" :key="index">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" v-model="checkedFiles" :id="index" :value="value" aria-label="Checkbox for following text input" >
            </div>
        </div>
        <input type="text" :value="value" :id="index" class="form-control" aria-label="Text input with checkbox">
    </div>

    <button class="btn btn-success btn-sm" v-show="isVisible" @click="generate">Generate List</button>
</template>

<script>
    export default {
        name: "directories-component",
        data() {
            return {
                list: [],
                checkedFiles: [],
            }
        },
        methods: {
            getTheList() {
                //....
                this.list = res.data.data;
                //....
            },
            generate(e) {
                e.preventDefault();
                console.log(this.checkedFiles);
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Any suggestions?