我不太确定我是否理解这是如何工作的。
我正在使用架构构建地址自动完成设置。
我希望能够显示/隐藏手动输入的字段
这是表单当前的外观x1c 0d1x
最初，我希望隐藏蓝色部分，仅在选中Can't find your address?时显示
这是我目前的代码

{
    $formkit: InputType.GROUP,
    name: 'address',
    label: label,
    children: [
      {
        $el: 'section',
        attrs: {
          class: 'mb-8 mt-8',
        },
        children: [
          {
            $el: 'h3',
            attrs: {
              class: `${labelClasses} mb-0`,
            },
            children: [label],
          },
          {
            $el: 'p',
            attrs: {
              class: 'text-sm font-normal mb-2',
            },
            children: [t('form.labels.address.help')],
          },
          {
            $formkit: InputType.ADDRESS_SEARCH,
            label: '',
            name: 'address',
            validation: 'required',
            classes: {
              outer: '!mb-2',
            },
          },
          {
            $formkit: InputType.CHECKBOX,
            label: t('form.labels.address.cant_find'),
            name: 'manual',
          },
          {
            $formkit: InputType.GROUP,
            name: 'address_details',
            label: 'address_details',
            children: [
              {
                $el: 'section',
                attrs: {
                  class: {
                    if: '$manual',
                    then: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-red-500',
                    else: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-blue-500',
                  },
                },
                children: [
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.street_address'),
                    name: 'street_address',
                    validation: 'required',
                    classes: {
                      outer: 'col-span-2 !mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.city'),
                    name: 'city',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.state'),
                    name: 'state',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.country'),
                    name: 'country',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  PostcodeSchema,
                ],
              },
            ],
          },
        ],
      },
    ],
  };

我目前正在根据$manual选项的状态，将文字颜色从蓝色变更为红色来进行追踪

attrs: {
   class: {
     if: '$manual',
     then: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-red-500',
     else: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-blue-500',
   },
},

然而，当选择手动选项时，它似乎从来没有改变颜色。
这就好像它没有登记的变化。
我正在使用this playground example，它似乎可以做我想做的事情，但不适合我。
我错过了什么？