title: reactive object not updating on event emitted from watch
body: <p>i'm building a complex form using this reactive obj</p>
  <pre class="lang-js prettyprint-override"><code>    const formData = reactive({})
      provide('formData', formData)
  </code></pre>
  <p>inside the form one of the components is rendered like this:</p>
  <pre class="lang-js prettyprint-override"><code>      &lt;ComboZone
            v-model:municipality_p=&quot;formData.registry.municipality&quot;
            v-model:province_p=&quot;formData.registry.province&quot;
            v-model:region_p=&quot;formData.registry.region&quot;
          /&gt;
  </code></pre>
  <p>this is the ComboZone render function:</p>
  <pre class="lang-js prettyprint-override"><code>     setup(props: any, { emit }) {
          const { t } = useI18n()
      
          const { getters } = useStore()
          const municipalities = getters['registry/municipalities']
          const _provinces = getters['registry/provinces']
          const _regions = getters['registry/regions']
      
          const municipality = useModelWrapper(props, emit, 'municipality_p')
          const province = useModelWrapper(props, emit, 'province_p')
          const region = useModelWrapper(props, emit, 'region_p')
      
          const updateConnectedField = (key: string, collection: ComputedRef&lt;any&gt;) =&gt; {
            if (collection.value &amp;&amp; collection.value.length === 1) {
              console.log(`update:${key} =&gt; ${collection.value[0].id}`)
              emit(`update:${key}`, collection.value[0].id)
            } else {
              console.log(`update:${key} =&gt;undefined`)
              emit(`update:${key}`, undefined)
            }
          }
      
          const provinces = computed(() =&gt; (municipality.value ? _provinces[municipality.value] : []))
          const regions = computed(() =&gt; (province.value ? _regions[province.value] : []))
      
          watch(municipality, () =&gt; updateConnectedField('province_p', provinces))
          watch(province, () =&gt; updateConnectedField('region_p', regions))
      
          return { t, municipality, province, region, municipalities, provinces, regions }
        }
  </code></pre>
  <p>useModelWrapper :</p>
  <pre class="lang-js prettyprint-override"><code>import { computed, WritableComputedRef } from 'vue'
  export default function useModelWrapper(props: any, emit: any, name = 'modelValue'): WritableComputedRef&lt;any&gt; {
    return computed({
      get: () =&gt; props[name],
      set: (value) =&gt; {
        console.log(`useModelWrapper update:${name} =&gt; ${value}`)
        emit(`update:${name}`, value)
      }
    })
  }
  
  </code></pre>
  <p>problem is that the events emitted from useModelWrapper update the formData in the parent template correctly, the events emitted from inside the watch function are delayed by one render....</p>