<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>
At the time of rendering, the hidden value controls the visibility of checkbox and input within the div. However, even though clicking on the toggle button successfully changes the hidden value, the visibility based on v-show does not update as intended. What could be causing this setup to behave incorrectly?