Lógica

1. Tengo casillas de verificación con entradas como etiqueta cuyos valores provienen de la base de datos, por lo que el texto (valor) ya existe. (hecho)
2. Quiero hacer una lista de elementos marcados (hecho)
3. Si cambié el valor de un elemento, quiero obtener el valor modificado, pero aún me da el valor de la base de datos (necesito ayuda)

Para una mejor comprensión, aquí hay algunas capturas de pantalla:

1

2

PD: si cambio mi entrada antes de marcar la casilla de verificación, mi valor salta automáticamente al valor predeterminado (valor DB)

Código

 <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>

¿Alguna sugerencia?