title: Passing and assign data to state using Composition API in Vue
body: <p>I new in web programming and I try to make simple dynamic web using Vue.
  I have a little problem with passing and assign data to state using composition API. Here the snippet code :</p>
  
  <p>Main.vue : </p>
  
  <pre><code>export default defineComponent({
      setup(_, { root: { $api } }) {
  
      const state = reactive({
        isFetching: true,
        build: [],
        data:{},
        searches: {
           name: [],
           age: []
        },
      });
  
  onMounted(async () =&gt; {
    // get data from API
    state.data = dataFromAPI;   
  });
  
  const onSearch = (state2) =&gt; {
      ....
  };
  
  return {
    ...toRefs(state),
    tableHeaders,
    onSearch,
    pagination: {
      rowsPerPage: 10,
    },
  };
  </code></pre>
  
  <p>Child.vue : </p>
  
  <pre><code>export default defineComponent({
      props: {
          searches: { type: Object, required: true },
      },
      setup(_, { emit }) {
          const state = reactive({
             name: ref(null), // I need assign this with value that I get from API in Main.vue
             age: ref(null),
          });
  
     const onSearch = () =&gt; {
         emit('onSearch', { ...state });
     };
  
     return {
        ...toRefs(state),
        onSearch,
     };
  });
  </code></pre>
  
  <p>I need to passing data and assign that data which I get from API in Main.vue to state in Child.vue. Few days ago I didn't try with composition API and I success pass the data between parent to child or child to parent but I got confused with composition API. I read the composition API documentation but not find any answer. </p>