Checkboxes not being checked programatically after user checks it once

I'm having an interesting problem I can't solve with a Vue app I'm working on. The behaviour I want (parent checkbox when (un)checked, (un)checks all child checkboxes) is there, but with a problem.

When you click a checkbox, that checkbox is ignored by parent checkboxes. This means that after clicking any child checkbox, clicking a parent checkbox has no effect on the previously clicked checkbox; it just keeps it's value.

Here's where it gets weird: I looked at the elements tab in safari, and it says the clicked box is changing values when the parent is (un)selected, but visually it is staying the same.

I know that the box is checked, since other parts of the app are doing what I expect, but I can't figure out why it will say a box has class="checked" checked="checked", but still be visually unchecked.

Is there something else that happens to a checkbox when you click it, that makes the way I check child checkboxes visually incorrect?

Relevant HTML:

<template>
<div v-for=“(foo, bar) in foobar” :key=bar>
<div class=“root”>
    <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleRootClick($event)">
</div>
<div class=“child 1”>
    <div v-for=“(foo, bar) in foobar” :key=bar>
        <div class=“child 1 header">
            <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild1Click($event)">
        </div>
        <div class=“child 1”>
            <div v-if=“foobar.length > 0">
                <div class=“child 2 header">
                    <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild2Click($event)">
                </div>
                <div class="resource-dropdown-contents">
                    <div v-for=“(foo, bar) in foobar” :key=bar>
                        <div class=“child 3 header">
                            <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild3Click($event)">
                        </div>
                        <div class="compute-dropdown-contents">
                            <div v-for=“(foo, bar) in foobar” :key=bar>
                                <div class=“child 4 header">
                                  <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild4Click($event)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And here is the relevant typescript code:

public handleRootClick(e) {
    const root = e.currentTarget.parentElement.parentElement;
    const checkboxes = root.querySelectorAll('#checkbox');
    const isChecked = checkboxes[0].classList.contains('checked');

    if (isChecked) {
        // ensure all children are unchecked
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].classList.contains('checked')) {
                checkboxes[i].classList.remove('checked');
                checkboxes[i].removeAttribute('checked');
            }
        }
    } else {
        // ensure all children are checked
        for (let i = 0; i < checkboxes.length; i++) {
            if (!checkboxes[i].classList.contains('checked')) {
                checkboxes[i].classList.add('checked');
                checkboxes[i].setAttribute('checked', 'checked');
            }
        }
    }
    e.stopPropagation();
}

The other handleChildxClick functions are very similar to the above function.