Gist to remind me how do do this.

const emit = defineEmits(['checked'])

const checked = ref(new Set())

watch(checked, (newValue, oldValue) => {
    emit('checked', [...newValue])
});

const isChecked = (item) => {
    console.log("is checked", item);
    return [...checked.value].some(existingItem => existingItem === item);
}


const toggleAll = () => {
    if ([...props.facebook_data.data].every(item => checked.value.has(item.id))) {
        for (const item of props.facebook_data.data) {
            checked.value.delete(item.id);
        }
    } else {
        for (const item of props.facebook_data.data) {
            if (!checked.value.has(item.id)) {
                checked.value.add(item.id);
            }
        }
    }
}

const toggleChecked = (item) => {
    const existingItem = [...checked.value].find(existingItem => existingItem === item);
    if (existingItem) {
        checked.value.delete(existingItem);
    } else {
        checked.value.add(item);
    }
}

This sets up the data:

<td class="whitespace-nowrap px-3 py-4 text-sm ">
  <input type="checkbox"
  :checked="isChecked(item.id)"
	@click="toggleChecked(item.id)">
</td>

Lastly the check all

<input type="checkbox"
	@click="toggleAll()">
  <TableDark>