title: Vue 3 pass reactive object to component with two way binding
body: <p>I have an issue in the two way binding of a reactive component in vue 3 using the composition API.</p>
  <p><em><strong>The setup:</strong></em></p>
  <p>The parent calling code is:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;h1&gt;{{ message.test }}&lt;/h1&gt;
    &lt;Message v-model=&quot;message&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Message from '@/components/Message.vue';
  import { reactive } from 'vue';
  
  export default {
    name: 'Home',
    components: { Message },
  
    setup() {
      const message = reactive({ test: '123' });
  
      return {
        message
      };
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>The child component code is:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;label&gt;
      &lt;input v-model=&quot;message&quot; type=&quot;text&quot; /&gt;
    &lt;/label&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { computed } from 'vue';
  
  export default {
    props: {
      messageObj: {
        type: Object,
        default: () =&gt; {},
      },
    },
  
    emits: ['update:messageObj'],
  
    setup(props, { emit }) {
      const message = computed({
        get: () =&gt; props.messageObj.test,
        set: (value) =&gt; emit('update:messageObj', value),
      });
  
      return {
        message,
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>The problem:</p>
  <p>When the component is loaded, the default value from the object is shown in the input field.
  This is as it should be, however, when I update the value in the input box the H1 in the parent view is not getting updated with the new input box value.</p>
  <p>I have searched through the stackoverflow board and google but have not found any hint as to what needs to be done to make the object reactive.</p>
  <p>I read through the <a href="https://v3.vuejs.org/guide/reactivity-fundamentals.html#destructuring-reactive-state" rel="noreferrer">reactivity documentation</a> but still have not found any solution for my issue.</p>
  <p>For testing I have changed message to be a ref and using this single ref value the data remains reactive and everything is working as expected.</p>
  <p>Any pointers on what can be the issue with the reactive object not updating?</p>