How do I change customize dynamically, and why doesn't the component update with ticks?

[Lippiece]

How do I change the fill and stroke during the lifecycle?

• agree only works when not touching the display property and using svg mode.
• agree2 doesn't work, with or without svg mode.

<script setup lang="ts">
const agree  = ref(false)
const agree2 = ref(false)

const setChecked   = (content: string) =>
  content
    .replaceAll(/stroke="[^"]*"/g, 'stroke="black"')
    .replaceAll(/fill="[^"]*"/g, 'fill="white"')
const setUnchecked = (content: string) =>
  content
    .replaceAll(/stroke="[^"]*"/g, 'stroke="black"')
    .replaceAll(/fill="[^"]*"/g, 'fill="yellow"')

const customize = (a, b) => (content: string) =>
  content.replaceAll(/stroke="[^"]*"/g, `stroke="${a}"`).replaceAll(/fill="[^"]*"/g, `fill="${b}"`)
</script>
<template>
  <label>
    <input
      v-model="agree"
      required
      type="checkbox"
      class="invisible absolute -z-10"
    >
    <Icon
      mode="svg"
      :customize="setChecked"
      name="local:checkbox"
      :class="{ hidden: !agree }"
    />
    <Icon
      :class="{ hidden: agree }"
      mode="svg"
      :customize="setUnchecked"
      name="local:checkbox"
    />
    Yes
  </label>
  <label>
    <input
      v-model="agree2"
      required
      type="checkbox"
      class="invisible absolute -z-10"
    >
    <Icon
      mode="svg"
      :customize="customize('black', 'white')"
      name="local:checkbox"
      :class="{ hidden: !agree }"
    />
    <Icon
      :class="{ hidden: agree }"
      mode="svg"
      :customize="customize('black', 'yellow')"
      name="local:checkbox"
    />
    Yes
  </label>
</template>

SVG

<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
  <rect x="0.5" y="0.5" width="19" height="19" rx="3.5" fill="#24A3B6"/>
  <rect x="0.5" y="0.5" width="19" height="19" rx="3.5" stroke="#24A3B6"/>
  <g clip-path="url(#clip0_4188_74097)">
    <path d="M6 9.5L9.125 12.625L15.375 6.375" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
  <defs>
    <clipPath id="clip0_4188_74097">
      <rect width="15" height="15" fill="white" transform="translate(3 2)"/>
      </clipPath>
    </defs>
  </svg>

`app.config.ts`

// app.config.ts
export default defineAppConfig({
  icon: {
    size             : '20px',
    customCollections: [
      {
        prefix: 'local',
        dir   : './assets/images/icons/'
      }
    ],
})

The number of times I've restarted Nuxt for debugging this is horrendous.