Vue.js3 Toggle v-show on checkbox/toggle click, how to make v-show reactive on each click

    <template>
     <ToggleSwitch class="right "  @onChange.preventDefault="onChange" ></ToggleSwitch>
                        
           <div v-show="!hidden">
               <CheckBox  v-if="typeof cellProps.rowData.BrandTypeId === 'boolean'" class="right 
                    space" />
               <Input v-if="typeof cellProps.rowData.BrandTypeId != 'boolean'"
                    class="right space"
                    label="Change Colors" />
            </div>
    </template>

<script lang="ts" setup>
    let hidden = true

    const onChange = () => {
        console.log("toggle successful", hidden)
        hidden = !hidden; 
    }

</script>

The hidden value works at render and does not show the checkbox and input in the div. On clicking the the "hidden" value does change, but the v-show does not change.
How is this set up incorrectly?

>Solution :

You can make your variable reactive with ref :

import { ref } from "vue'
let hidden = ref(true)

const onChange = () => {
    console.log("toggle successful", hidden)
    hidden.value = !hidden.value; 
}