Vue3 - OnMount doesn´t load array

Question

In Vue 3 i need to fill some array with result of store. I import store like this

Imports

import { onMounted, ref, watch } from "vue";
import { useTableStore } from "../stores/table"; 

Then i declare values and try to fill it

    const search = ref(null);
    const searchInput = ref("");
    const edition = ref([]);
    const compilation = ref([]);
    const debug = ref([]);
    const navigation = ref([]);
    const refactoring = ref([]);
    const store = useTableStore();
    onMounted(() => {
      store.fetchTable();
      edition.value = store.getEdition;
      compilation.value = store.getCompilation;
      debug.value = store.getDebug;
      navigation.value = store.getNavigation;
      refactoring.value = store.getRefactoring;
    });

Values doesn´t fill it. Is strange, if use watcher like this

edition.value = store.getEdition.filter((edition: String) => {
        for (let key in edition) {
          if (
            edition[key].toLowerCase().includes(searchInput.value.toLowerCase())
          ) {
            return true;
          }
        }
      });

Array get values.

So, the problem is: How can i get store values when view loads?

Maybe the problem is the store returns Proxy object...

UPDATE 1

I created a gist with full code

https://gist.github.com/ElHombreSinNombre/4796da5bcdcf6bf4f36f009132dd9f48

UPDATE 2

Pinia loads array data, but 'setup' can´t get it

UPDATE 3: SOLUTION

Finally i resolved the problems and upload to my Github. I used computed to get data updated. Maybe other solution was better.

https://github.com/ElHombreSinNombre/vue-shortcuts

Answer 1

Your onMounted lambda needs to be async, and you need to wait the fetchTable function. Edit: Try using reactive instead of ref for your arrays. Rule of thumb is ref for primitive values and reactive for objects and arrays.

 const search = ref(null);
 const searchInput = ref("");
 const edition = reactive([]);
 const compilation = reactive([]);
 const debug = reactive([]);
 const navigation = reactive([]);
 const refactoring = reactive([]);
 const store = useTableStore();

 onMounted(async () => {
   await store.fetchTable();
   edition.push(...store.getEdition);
   compilation.push(...store.getCompilation);
   debug.push(...store.getDebug);
   navigation.push(...store.getNavigation);
   refactoring.push(...store.getRefactoring);
 });

If what you need is the component to not be rendered until data is ready, you'll need a flag in your data that works along with a v-if to render the component when everything is ready, something like this:

// in your template
<div v-if="dataReady">
    // your html code
</div>


// inside your script 
const dataReady = ref(false)

onMounted(async () => {
      await store.fetchTable();
      dataReady.value = true; 
    });