title: Properly accesing to reactive array in Vue 3
body: <p>I'm working on my Vue 3 app and I'm experiencing some troubles on making things work as expected.</p>
  <p>What I need is to properly access a reactive array. Let me show you the code for clarifying purposes:</p>
  <p>I have a global store <code>store/questions/index.js</code> with the following code:</p>
  <pre><code>
  const useQuestionsAndAnswers = () =&gt; {
      const data = reactive([])
      const getQuestionsAndAnswers = async () =&gt; {
        const response = await fetch('../../../db/questions.json')
        const fetchedData = await response.json();
        if(response.status === 200) {
          fetchedData.data.forEach(obj =&gt; data.push(obj))
          console.log(data[0]);  &lt;--------- // This console.log works ok
        } else {
          console.log('Something went wrong')
        }
      };
        
      onMounted(() =&gt; {
          getQuestionsAndAnswers();
      });
  
      return { data }
  }
  
  export default useQuestionsAndAnswers;
  </code></pre>
  <p>If I run <code>console.log(data[0])</code> I get the object I expect. So let's say it is working properly.</p>
  <p>As you may realize, I want this data to be used on some Vue component. Well, the component is the next one:</p>
  <p><code>components/calculator/Questions.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;block max-w-4xl&quot; v-if='data'&gt;
      &lt;h3 class='py-4'&gt;Seleccioná la opción que mejor te describa&lt;/h3&gt;
      {{ data[0] }} // Same as the console.log I showed you before.
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import useQuestionsAndAnswers from '../../store/questions/index.js'
  export default {
    setup() {
      const  { data }  = useQuestionsAndAnswers();
  
      console.log(data)
  
      return {
        data,
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>And here is the part where things went weird. The binding data in DOM <code>{{ data[0] }}</code> works well and displays the entire object corresponding to that position, but if I try to access to <code>question</code> key as <code>data[0].question</code> it shows the data but if I refresh the page I got undefined. It seems like I'm missing reactivity.</p>
  <p>The other problem is happening inside my <code>setup()</code> function. If I <code>console.log(data)</code> I get the expected <code>Proxy</code> with my <code>array</code>. But, if I try to access one object from the array mentioned <code>console.log(data[0])</code> I got <code>undefined</code> once again.</p>
  <p>For last, I'll show you an example of the <code>json</code> I'm receiving:</p>
  <pre><code>{
      &quot;data&quot;: [
          {
              &quot;question&quot; : &quot;Estás en medio de una pandemia mundial y estatizas una conocida empresa de alimentos (su nombre empieza con V de Vicentín) que no le paga a sus acreedores hace años. Qué harías ante el embate de Clarín?&quot;,
              &quot;image&quot;: &quot;@/assets/alberto.png&quot;,
              &quot;id&quot;: 1,
              &quot;answers&quot;: [
                  {
                      &quot;id&quot;: 1,
                      &quot;answer&quot;: &quot;Me haría el picante unos días y después me tiraría atrás.&quot;,
                      &quot;points&quot;: 2,
                      &quot;slug&quot;: &quot;haria-el-picante&quot;
                  }
              ]
          }
      ]
  }
  </code></pre>
  <p>So what I want is to properly access to the array and displays the data I want to.</p>
  <p>Thanks in advance!</p>