title: How to pass reactive data to a composable in Vue 3
body: <p>Is it possible to declare a reactive object in Vue, and then pass members of that object to a composable while retaining reactivity?</p>
  <p>For example:</p>
  <p>I declare a &quot;State&quot; type:</p>
  <pre><code>type State = { myObjectList: Array&lt;MyObject&gt; }
  </code></pre>
  <p>Then in my component I initialize my state:</p>
  <pre><code>const state = reactive&lt;State&gt;{( myObjectList: new Array&lt;MyObject&gt;() )}
  </code></pre>
  <p>Where <code>state.myObjectList</code> gets populated via API call on component mount</p>
  <p>My question is, is it possible to pass around <code>state.myObjectList</code> to a composable, and have that composable be aware of changes made to elements inside of <code>state.myObjectList</code>?</p>
  <p>i.e. to have a composable like:</p>
  <pre><code>export default function useSimpleCalculator(list: Array&lt;MyObject&gt;){
  
    const dynamicSumValue = computed(():number =&gt; { 
      let sum = 0;
      list.forEach(el =&gt; {  sum += el.someValueThatChanges });
      return sum;
    });
  
   return { dynamicSumValue }
  
  }
  </code></pre>
  <p>then use that composable like:</p>
  <pre><code>const {dynamicSumValue} = useSimpleCalculator(state.myObjectList);
  </code></pre>
  <p>and have <code>dynamicSumValue</code> be updated as changes are made to elements inside <code>state.myObjectList</code></p>
  <p>I've tried to implement like the above, but when I pass any property that was on the <code>state</code> object, it loses its reactivity inside the composable.</p>
  <p>Passing <code>ref</code>s to the composable seems to work ( i.e. <code>const val = ref(2)</code> ), but that goes against the pattern our team decided on for component-wide state data</p>
  <p>Any insight would be helpful</p>