title: How to 2-way bind props with local data of a component in Vue 3?
body: <p>Can anyone tell me how I can bind the prop of a component to a data property of its own? For example, consider I have a component called <code>ModalComponent</code></p>
  <pre><code>&lt;template&gt;  // ModalComponent.vue
     &lt;div v-if=&quot;showModal&quot;&gt;
        ...
        &lt;button @click=&quot;showModal = !showModal&quot;&gt;close the modal internally&lt;/button&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        showModal: false,
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  <p>Now consider I am using this modal as a reusable component from inside a parent component using an external button to open up the pop up for the modal.</p>
  <pre><code>&lt;template&gt;
    &lt;button @click=&quot;showChild = !showChild&quot;&gt;click to open modal&lt;/button&gt;
    &lt;ModalComponent :show=&quot;showChild&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    components: {ModalComponent},
    data() {
      return {
        showChild: false,    
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  <p>How do I make it so that every time the parent clicks on the button, the modal pops up by binding the local <code>showModal</code> to the prop <code>show</code> ? And when the modal is closed internally by the local close button, if I click on the parent button again it will re-pop up? (I am using Vue 3, just in case)</p>
  <p>Any help would be appreciated. Thanks.</p>