Puedes resolver este problema así

En App.Svelte

 <script> import Checkbox from './Checkbox.svelte'; let schema = { name: "bar", vars: [{ name: "X" }], }; $: availableLTs = ["aaa", "bbb", "ccc", "ABC"]; $: matchesSearch = availableLTs.filter((elem) =>{ return elem.includes(searchString); }) let selectedChart = 'bar'; let selectedVars = {X: { lts: [] }}; $: console.log(selectedVars) $: schemaVars = schema.vars; let searchString = ""; </script> <main> {#each schemaVars as {name}} <h6> {name} <input type="text" bind:value={searchString} placeholder="Search..." /> </h6> <Checkbox bind:value={selectedVars} {name} {matchesSearch}/> {/each} </main>

En Checkbox.Svelte

 <script> export let value, name, matchesSearch; </script> {#each matchesSearch as ele} <div class="form-check"> <label> <input type="checkbox" class="form-check-input" bind:group={value[name].lts} value={ele} /> {ele} </label> </div> {/each}

Puedes comprobarlo en este repl

Parece que el problema tiene algo que ver con cada bucle anidado

 {#each schemaVars as schemaVar} ... {#each availableLTs as ele} ...//Checkbox {/each} {/each}

que se puede resolver envolviendo el bucle interno dentro de un componente.

La respuesta anterior casi resolvió el problema, pero falta una cosa importante: cada bucle dentro del componente no es un "bloque con clave" ->

1. seleccione la tercera casilla de verificación 'ccc'
2. filtro para 'c'
3. -> 'ccc' se mueve a la primera posición y ya no se marca

(alternativamente seleccione 'aaa' y filtre por 'b'...)

Esto se puede resolver agregando el texto de la etiqueta como clave/id (suponiendo que las etiquetas de las casillas de verificación sean únicas) ->

 {#each filteredLTs as ele (ele)} ... {/each}

Dado que el problema no era la forma en que se configuró la variable (...selectedVars[schemaVar.name].lts}), intentaría mantener la lógica dentro del componente general y establecer las variables específicamente dentro de la etiqueta del componente dentro de la aplicación. esbelto -> el componente se mantiene universal y se puede reutilizar fácilmente Ejemplo en este REPL

[Aplicación pequeña]

 <script> import Checkboxes from './Checkboxes.svelte' let schema = { name: "bar", vars: [{ name: "X" }], }; let allLTs = ["aaa", "bbb", "ccc", "abc"]; let searchString = ""; $: filteredLTs = allLTs.filter(lt => lt.includes(searchString)) let selectedVars = {X: { lts: [] }}; $: console.log(selectedVars.X.lts) </script> <main> {#each schema.vars as schemaVar} <h6> {schemaVar.name} <input type="text" bind:value={searchString} placeholder="Search..." /> </h6> <div class="form-check"> <Checkboxes checkboxes={filteredLTs} bind:checked={selectedVars[schemaVar.name].lts}/> </div> {/each} </main>

[Casillas de verificación.svelte]

 <script> export let checkboxes, checked </script> {#each checkboxes as checkbox (checkbox)} <label> <input type="checkbox" class="form-check-input" bind:group={checked} value={checkbox} /> {checkbox} </label> {/each}