Check how the global "items" value from the form changes
$$.state.items: {{JSON.stringify($$.state.items)}}
<form action="/save-state">
<div class="grid">
<input type="text" name="task" placeholder="What needs to be done?" />
<button type="button" onclick="$$.state.items.push({completed: false, text: $$.state.task})">Add Task</button>
</div>
<div>
<fieldset>
<label>
<input name="items[0][completed]" type="checkbox" />
</label>
<input type="text" name="items[0][text]" value="Add your todo items">
<button type="button" :data-idx="idx" onclick="$$.state.items.splice(this.dataset.idx, 1)">x</button>
</fieldset>
<fieldset>
<label>
<input name="items[1][completed]" type="checkbox" />
</label>
<input type="text" name="items[1][text]" value="Check the code">
<button type="button" :data-idx="idx" onclick="$$.state.items.splice(this.dataset.idx, 1)">x</button>
</fieldset>
</div>
<span v-text="$$.state.items.filter(itm => !itm.completed).length"></span> items left
</form>