Ant-D Tree “Half-Checked” Property

I’m trying to build what I’d assumed would be a relatively straightforward implementation of Ant-D’s Tree component, and I’m running into issues.

Specifically, I’m unclear how to replicate the “half-checked” vs. “full-checked” behavior of their example. I’d like for the child nodes, when all fully checked, to also check their parent. Likewise when the parents are de-selected, I’d like all of the children to be deselected as well. Finally, when only some of a child nodes are checked/unchecked, the parent should go into a “half-checked” state.

The API seems to allow for this, and indeed they have an example here that purports to show off this functionality.

<template>
  <a-tree
    v-model:selectedKeys="selectedKeys"
    v-model:checkedKeys="checkedKeys"
    default-expand-all
    checkable
    :height="233"
    :tree-data="treeData"
  >
    <template #title="{ title, key }">
      <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
      <template v-else>{{ title }}</template>
    </template>
  </a-tree>
</template>
<script lang="ts">
import type { TreeProps } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue';

function dig(path = '0', level = 3) {
  const list: TreeProps['treeData'] = [];
  for (let i = 0; i < 10; i += 1) {
    const key = `${path}-${i}`;
    const treeNode: TreeProps['treeData'][number] = {
      title: key,
      key,
    };

    if (level > 0) {
      treeNode.children = dig(key, level - 1);
    }

    list.push(treeNode);
  }
  return list;
}

export default defineComponent({
  setup() {
    const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
    const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
    watch(selectedKeys, () => {
      console.log('selectedKeys', selectedKeys);
    });
    watch(checkedKeys, () => {
      console.log('checkedKeys', checkedKeys);
    });

    return {
      treeData: dig(),
      selectedKeys,
      checkedKeys,
    };
  },
});
</script>

It’s not clear to me how this works. Nowhere are they setting the checkedKeys data. Is this handled internally by the tree? I’ve tried copying this example locally and it’s not even working.

The documentation further states about the checkedKeys prop:

“When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When checkable and checkStrictly is true, its object has checked and halfChecked property.”

If this example does not have checkStrictly set to true, then how are only some of the nodes supposed to become “half checked”?