Solución:
Para establecer el valor de la casilla de verificación, debe vincular el modelo v a un valor. La casilla de verificación se marcará si el valor es verdadero. En este caso, está iterando sobre modules y cada module tiene un checked propiedad.
El siguiente código vinculará la casilla de verificación con esa propiedad:
<input type="checkbox" v-model="module.checked" v-bind:id="module.id">
Note que eliminé v-bind:value="module.id". No deberías usar v-model y v-bind:value en el mismo elemento. De los documentos de vue:
<input v-model="something">es solo azúcar sintáctico para:
<input v-bind:value="something" v-on:input="something = $event.target.value">
Entonces, usando v-model y v-bind:value, en realidad terminas teniendo v-bind:value dos veces, lo que podría dar lugar a un comportamiento indefinido.
Digamos que desea pasar una prop a un componente hijo y esa prop es un booleano que determinará si la casilla de verificación está marcada o no, luego debe pasar el valor booleano al v-bind:checked="booleanValue" o el camino más corto :checked="booleanValue", por ejemplo:
<input
id="checkbox"
type="checkbox"
:value="checkboxVal"
:checked="booleanValue"
v-on:input="checkboxVal = $event.target.value"
/>
Eso debería funcionar y la casilla de verificación mostrará la casilla de verificación con su estado booleano actual (si es verdadero, si no está desmarcado).
En el modelo v, es posible que el valor de la propiedad no sea un valor booleano estricto y que la casilla de verificación no “reconozca” el valor como marcado / desmarcado. Hay una característica interesante en VueJS para hacer la conversión a verdadero o falso:
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>