title: Vue 3, Composition Api two way data binding on 'reactive' not working correctly
body: <p>i am new in <code>vue 3</code> and trying to make two data binding, but it's not working correctly. I did <code>setup()</code> and create a <code>reactive</code> data. Bind it to the children via <code>v-model</code>. Then $emit the updated data back to the parent. But parent's <code>reactive</code> data not applied 'till code re-run on save command.</p>
  <p><strong>parent script:</strong></p>
  <pre class="lang-js prettyprint-override"><code>    export default defineComponent({
        setup(){
          const activeCard = reactive({id:null, travelType:null})
          return {activeCard}
        },
      })
  </code></pre>
  <p><strong>parent template:</strong></p>
  <pre class="lang-html prettyprint-override"><code>    &lt;pin-card v-for=&quot;(pinCard, idx) in categoryPinCards&quot;
                :key=&quot;idx&quot;
                v-model=&quot;activeCard&quot;
                :pinCard=&quot;pinCard&quot;&gt;&lt;/pin-card&gt;
  
  </code></pre>
  <p><strong>child script</strong></p>
  <pre class="lang-js prettyprint-override"><code>    export default defineComponent({
        props:{
          modelValue:Object,
        },
        methods:{
          makePinActive(id:number, travelType:null) {
            this.$emit(&quot;update:modelValue&quot;, {id: id, travelType: travelType})
          },
        }
      })
  
  </code></pre>
  <p>I followed the steps but, something is missing?</p>