How to toggle two tags with Vue and Typescript?

Hi I’m new with Typescript. I’ve toggled two tags multiple times just in Vue, but now for the first time I’m doing it with Typescript.

In console log i see changes (true <–> false), but p tag is always the same.

<script lang="ts">
export default defineComponent({
    inheritAttrs: false,
})
</script>

<script lang="ts" setup>
let checked = false
function checkFunction(value: any) {
    checked = !checked
}
</script>

<template>
    <div>
        <button @click="checkFunction">
            <div class=" w-2/6 mx-auto  my-auto flex justify-between">
                <div>
                    <h1 class="text-md font-medium text-black ">Lorem, ipsum.</h1>
                    <p class="text-md font-medium text-gray-500 ">Lorem ipsum dolor sit amet consectetur.</p>
                </div>

               <p v-if="checked === true">This is true</p>
               <p v-else-if="checked === false">This is false </p>

           </div>
       </button>
   </div>
</template>

>Solution :

You should define the checked as reactive variable using ref, and use .value field to mutate it :

<script lang="ts">


export default defineComponent({
    inheritAttrs: false,
})
</script>

<script lang="ts" setup>
import {ref} from 'vue'

let checked = ref(false)

function checkFunction(value: any) {
    checked.value = !checked.value
}
</script>

<template>
    <div>
        <button @click="checkFunction">
            <div class=" w-2/6 mx-auto  my-auto flex justify-between">
                <div>
                    <h1 class="text-md font-medium text-black ">Lorem, ipsum.</h1>
                    <p class="text-md font-medium text-gray-500 ">Lorem ipsum dolor sit amet consectetur.</p>
                </div>

               <p v-if="checked">This is true</p>
               <p v-else>This is false </p>

           </div>
       </button>
   </div>
</template>