computed value from mapGetters is empty

[dajpes]

Steps to reproduce

Hello everybody

In vue 2 ,when I do page refresh to a paginated page (like doing F5 or manually typing the url), the computed property is empty when in reality it should be populated from the api. This issue doesn't happen when I dynamically go to a paginated url.

For example if my website I go to "todo.com/todos" from "todo.com", there are not any problem with the mapGetters. Now if I manually go to "todo.com/todos" the mapGetters is called but the data is empty even though the result from the fetch (both in client and the api) displays many results.

Let me make this case more clear:

in my todos component I have the info like this:

<template>
  <div  v-if="items.length > 0">
    <TodosItem
      v-for="item in items"
      :key="item.id"
      />
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';

export Default {
 data : () => ({
   query:  {
        todosId: 1,
        action: {
          $nin: this.hiddenActions,
        },
        $sort: { createdAt: -1 },
        $skip: this.skipItemGroups,
        $limit: 30
    },
  }),
  computed: {
    ...mapGetters('itemsGroup',  { findItemsGroups: 'find' }),
    items() { // This is the One that doesnt wanna work when doing a page refresh o manually going to 'todos.com/todos'
      return this.findItemsGroups({
        query: this.queryItemsGroups,
      }).data;
    },
  methods: {
    ...mapActions('itemsGroup',  { findEveryItemsGroups: 'find' }),
   },
  async created() {
     await this.findEveryItemsGroups({
        query: this.queryItemsGroups
     }) // this methods always return the data I want
   },
   mounted() {
    console.log("Show me all the Items", this.items)  // => Doing an F5 this returns [], going dynamically from "todos.com" it returns all the data I need
   }
 }
}
</script>

The "findEveryItemsGroups" method from mapActions always return the data I fetch from the API, the problem here lies with the computed property items(). That computed property is empty no matter how much I wait and it happens only when I refresh the page or manually type the url.

I tried updating feathers to the last version, updating node to the last version to no avail.

I also tried using this method to fetch the data from the api inside the created Hook, but it doesn't work either:

async created() {
 const { itemsGroup } = this.$FeathersVuex.TODOS;
        await itemsGroup.find({
          query: this.queryItemsGroups,
    }),
}

@marshallswain The only workaround I found thus far is storing the result from the mapActions method inside a variable:

 data: () => ({
 items: [],
 //query data
}),
methods: {
    ...mapActions('itemsGroup',  { findEveryItemsGroups: 'find' }),
   },
async created() {
   this.items= await this.findEveryItemsGroups({
    query:this.queryItemsGroups
  })
}

Doing the above save me some line of codes, because I don't have to use any mapGetter nor computed property, but to be honest I don't know if this is the best way to do that

Expected behavior

Following the first example, computed property items() should display data whether I refresh the page or manually type the url.

Actual behavior

Computed property items() is always an empty array when I refresh the page or I manually the url)

System configuration

Tell us about the applicable parts of your setup.

Module versions : "feathers-vuex": "^3.9.1",

NodeJS version: 12.16.2

Operating System: Linux Mint 20 Ulyana 64bits

Browser Version: Brave Version 1.15.76 Chromium: 86.0.4240.111 (Official Build) (64-bit). Using firefox or chrome the error/bug still appears

Vue Version: 2.6

Module Loader: Don't know where can I find that