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

Question

<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?

Answer 1

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; 
}