title: I have two different div coded using vue.js3 composition and v-if is not working correctly?
body: <p>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.</p>
  <p>It looks like screenMode is being updated when displaying value using console.log, but the section is not hiding. Any idea?</p>
  <pre><code>&lt;script setup&gt;
    
    import { ref, onMounted } from 'vue'
  
    let screenMode = 'screenA'; 
  
    console.log('screenMode = ' + screenMode)
  
    function test(recordDate) {
      screenMode = 'screenB'
      console.log(&quot;screenMode =&quot; + screenMode)
    }
  
  
    onMounted(() =&gt; {
      screenMode.value
    })
  
  &lt;/script&gt;
  
  
  
  &lt;template&gt;
      &lt;p class=&quot;screenTitle&quot; &gt;Calendar&lt;/p&gt;
  
      &lt;div class=&quot;container&quot; v-if=&quot;screenMode === 'screenA'&quot;&gt;    
        &lt;table class=&quot;table table-striped&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th scope=&quot;col&quot;&gt;&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Date&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Total&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr id=&quot;row1&quot; @click=&quot;test('5/26/2022')&quot;&gt;
              &lt;th scope=&quot;row&quot;&gt;&lt;/th&gt;
              &lt;td&gt;5/26/2022&lt;/td&gt;
              &lt;td&gt;52&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th scope=&quot;row&quot;&gt;&lt;/th&gt;
              &lt;td&gt;5/27/2022&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th scope=&quot;row&quot;&gt;&lt;/th&gt;
              &lt;td&gt;5/28/2022&lt;/td&gt;
              &lt;td&gt;90&lt;/td&gt;
            &lt;/tr&gt;        
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;container&quot; v-if=&quot;screenMode === 'screenB'&quot;&gt;    
      &lt;table class=&quot;table table-striped&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;@mdo&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;@fat&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
            &lt;td colspan=&quot;2&quot;&gt;Larry the Bird&lt;/td&gt;
            &lt;td&gt;@twitter&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  
  
  &lt;/template&gt;
  
  &lt;style&gt;
  
  .screenTitle{
    color: blueviolet;
    margin-left: 10px;
    margin-top: 25px;
  }
  
  &lt;/style&gt;
  
  &lt;!-- &lt;style&gt;
  @media (min-width: 1024px) {
    .about {
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
  }
  &lt;/style&gt; --&gt;
  
  
  
  </code></pre>