title: Can't retrieve data from state using Pinia Store
body: <p>I'm trying to get over the composition API and Pinia with Vue3.</p>
  <p>I'm making a call to an external API to fetch some data and store it in the state of the store, my issue here is that when I call this state from my page, it appears to be empty and I can't retrieve the data that I've been calling in the <em>actions</em> section of my store. Any ideas where I'm wrong in the process?</p>
  <p><em>App.vue</em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;h1&gt;Rick And Morty&lt;/h1&gt;
    &lt;ul&gt;
      &lt;li v-for=&quot;(item, index) in characters&quot; :key=&quot;index&quot;&gt;
       {{item}}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { useCharactersStore } from '@/stores/characters'
  import { onBeforeMount } from 'vue'
  export default {
    setup() {
    const useStore = useCharactersStore()
    const characters = useStore.characters
    console.log(&quot;Store: &quot; + characters)
    
    onBeforeMount(() =&gt; {
      useStore.fetchCharacters()
    })
    
    return { 
      useStore,
      characters
      }
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p><em>character.js</em></p>
  <pre class="lang-js prettyprint-override"><code>import { defineStore } from 'pinia'
  
  export const useCharactersStore = defineStore('main', {
      state: () =&gt; {
          return {
              characters: [],
              page: 1
          }
      },
      actions: {
          async fetchCharacters() {
              const res = await fetch('https://rickandmortyapi.com/api/character/')
              const { results } = await res.json()
              this.characters.push(results)
              console.log(&quot;Back: &quot; + this.characters)
          }
      }
  })
  </code></pre>