title: Vue3: how to mix composition api and options api for composable/mixin namespacing
body: <p>Good day!</p>
  <p>Let's say I want to use Vue with options api but also do not want to use mixins as they causes a lot of problem. I want to use composables as mixins to give namespacing for mixins/composables.</p>
  <p>So, my &quot;solution&quot; was to combine options api and composition api.</p>
  <p>Let's say I have a mixin like this:</p>
  <pre><code>export default {
    data() {
      return {
        person: {
          first_name: 'first name',
          last_name: 'last name',
        },
        gender: 'gender'
      }
  }
  </code></pre>
  <p>So I decided to convert it into a composable as follows:</p>
  <pre><code>export default () =&gt; {
    const person = reactive({first_name: 'fn', last_name: 'ln'});
    const gender = ref('gender');
    
    return {
      person,
      gender,
    }
  }
  </code></pre>
  <p>So, in my .vue file I can import the composable:</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
  import useDataComposable from './dataMixin';
  ...
  
  export default defineComponent({
    ...
    setup() {
      const dataComposable = useDataComposable();
      dataComposable.gender.value = 'gender2';
      dataComposable.person.first_name = 'first name2';
  
      return {dataComposable};
    },
    created() {
      // I want to use data and methods inside the composable as namespace.attribute
      // eg:
      console.log(this.dataComposable.person.first_name) // =&gt; returns 'first name2'
   
      // However,
      console.log(this.dataComposable.gender // does not return 'gender2';
        // but returns Ref object.
  ...
  </code></pre>
  <p>I know that I can destructure the composable in the setup function and return it:</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
  import useDataComposable from './dataMixin';
  ...
  
  export default defineComponent({
    ...
    setup() {
      const {person, gender}= useDataComposable();
  
      return {
        person, gender,
      };
    },
    created() {
      console.log(this.person.first_name) // =&gt; returns 'first name2'
   
      // However,
      console.log(this.gender // returns 'gender2';
  ...
  </code></pre>
  <p>However, there is no point to it, as it is anyway it is going to be mixed up with component state.</p>
  <p>Also, I could just use mixins with only one object, but I am not sure about it.</p>
  <pre><code>export default {
    data() {
      return {
        state: {
          person: {
            first_name: 'first name',
            last_name: 'last name',
          },
          gender: 'gender',
          
          myMethod: function() {...},
          computed: function() {...}
        },
        
        created() {...},
        onMounted() {...},
        watch: {
          gender(value) {...}.
        },
      }
  }
  </code></pre>
  <p>I am curious whether it is possible to do what I want.</p>
  <p><strong>Is there any way to use object with reactive and ref elements from composable in options api vue code?</strong></p>
  <p>Thanks in advance!</p>