I have two different div coded using vue.js3 composition and v-if is not working correctly?

I’m trying to show or hide section of the app using Vue.js 3 composition using v-if. I was able to get this working using vue.js 2 API option, but recently started using vue.js 3 API Composition.

It looks like screenMode is being updated when displaying value using console.log, but the section is not hiding. Any idea?

<script setup>
  
  import { ref, onMounted } from 'vue'

  let screenMode = 'screenA'; 

  console.log('screenMode = ' + screenMode)

  function test(recordDate) {
    screenMode = 'screenB'
    console.log("screenMode =" + screenMode)
  }


  onMounted(() => {
    screenMode.value
  })

</script>



<template>
    <p class="screenTitle" >Calendar</p>

    <div class="container" v-if="screenMode === 'screenA'">    
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col"></th>
            <th scope="col">Date</th>
            <th scope="col">Total</th>
          </tr>
        </thead>
        <tbody>
          <tr id="row1" @click="test('5/26/2022')">
            <th scope="row"></th>
            <td>5/26/2022</td>
            <td>52</td>
          </tr>
          <tr>
            <th scope="row"></th>
            <td>5/27/2022</td>
            <td>4</td>
          </tr>
          <tr>
            <th scope="row"></th>
            <td>5/28/2022</td>
            <td>90</td>
          </tr>        
        </tbody>
      </table>
  </div>

  <div class="container" v-if="screenMode === 'screenB'">    
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>


</template>

<style>

.screenTitle{
  color: blueviolet;
  margin-left: 10px;
  margin-top: 25px;
}

</style>

<!-- <style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style> -->