Vue.js function to change redacting state of a block is not working

I am developing a simple note app, right now I’m working on the NoteItem component. It has two buttons: to redact a note and to delete it. Second one works just fine, but first doesn’t. It calls the startRedacting() function, but the redacting variable is not changing, therefore v-else block is not rendering.

NoteItem.vue:

<script setup lang="ts">
import axios from "axios";
const props = defineProps(['title', 'content', 'note_id']);

let redacting = undefined;

let redTitle = props.title;
let redContent = props.content;

const deleteNote = async () => {
  await axios.delete(`http://localhost:3000/notes/${props.note_id}`)
      .then((res) => {
        if (res.status === 204) {
          location.reload()
        }
        else {
          console.log(`HTTP STATUS ${res.status}`)
        }
      })
}

const startRedacting = () => {
  redacting = true
}

const redactNote = async () => {
  await axios.put(`http://localhost:3000/notes/${props.note_id}`, {
    Title: redTitle,
    Content: redContent
  })
      .then((res) => {
        if (res.status === 200) {
          redacting = false
          location.reload()
        }
        else {
          console.log(`HTTP STATUS ${res.status}`)
        }
      })
}
</script>

<template>
<div class="flex flex-row justify-between border-2 border-r-6 border-gray-200 p-3 rounded-md">
  <div class="flex w-2.5 h-full bg-red-500 rounded-3xl resize-none flex-none" id="strip">
    <!--Poloska-->
  </div>
  <div v-if="!redacting" class="flex flex-col ml-8 text-wrap justify-self-start justify-start">
    <div id="title" class="text-xl justify-self-center text-left">
      {{ title }}
    </div>
    <div id="content" class="pt-4 text-pretty h-max truncate justify-self-start text-left">
      {{ content }}
    </div>
  </div>
  <div v-else>
    <div class="flex flex-col ml-8 text-wrap justify-self-start justify-start pr-2">
      <div class="text-xl justify-self-center text-left">
        <input type="text" v-model="redTitle" class="border-2 border-gray-200 rounded-md p-2 w-full">
      </div>
      <div id="content" class="pt-4 text-pretty h-max truncate justify-self-start text-left">
        <textarea v-model="redContent" class=" border-2 border-gray-200 rounded-md p-2 w-full"></textarea>
      </div>
      <button class="size-8  hover:shadow-neutral-300 hover:bg-green-700 rounded-lg justify-center w-full bg-green-600" @click="redactNote">
        <div class="text-white">Done</div>
      </button>
    </div>
  </div>
  <div class="flex flex-col">
    <button class="size-8 hover:shadow-neutral-300 hover:bg-neutral-200 rounded-lg" @click="startRedacting">
      <img src="../assets/pencil.svg" alt="" class="justify-self-center">
    </button>
    <button class="size-8 hover:shadow-neutral-300 hover:bg-red-400 rounded-lg mt-2" @click="deleteNote">
      <img src="../assets/trash-svgrepo-com.svg" alt="" class="pt-1">
    </button>
  </div>
</div>
</template>

<style scoped>
</style>