title: Vue 3 Composition API, Props, and v-if rendering despite false value
body: <p>I have an issue I don't think I'm really understanding here. I have a child component included which passes an &quot;active&quot; prop in and can be set to true or false.  The idea is if it's passed &quot;true&quot; then a part of the component shows, and if it's passed &quot;false&quot; it doesn't.</p>
  <p>from what I understand, I should be able to just use the prop name and do something like:</p>
  <pre><code>&lt;template&gt;
     &lt;div v-if=&quot;active&quot;&gt;this is the value of active: {{active}}&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>The issue here is if I directly set v-if in the above statement to true or false, then it works as expected.  If I pass it in as a prop, it always shows regardless of whether true or false.</p>
  <p>Works (doesn't show anything):</p>
  <pre><code>&lt;template&gt;
     &lt;div v-if=&quot;false&quot;&gt;this is the value of active: {{active}}&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Doesn't Work (contents in the div shows regardless of value of active):</p>
  <pre><code>//-File1---------------------------------------
  
  &lt;template&gt;
     &lt;myComponent active=false /&gt;
  &lt;/template&gt;
  
  //-File2---------------------------------------
  
  &lt;template&gt;
     &lt;div v-if=&quot;active&quot;&gt;this is the value of active: {{active}}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default{
          props:['active']
      }
  &lt;/script&gt;
  </code></pre>
  <p>Why is this?  I confirmed, by displaying the value of &quot;active&quot; that it's passing in as false, but it's still rendering despite the value being false.  Am I missing something here?  I've tried playing with quotes, without quotes, passing it into a local value using ref and using that:</p>
  <pre><code>import { ref } from 'vue';
  
  export default{
      props:['active']
      setup(props,ctx){
          const active = ref(props.active);
          return {
              active
          }
      }
  }
  </code></pre>
  <p>that also did not work.</p>