How to handle a direct jump to an address in a component?

Question

Vue.js

Hello. I'm trying to make a skeleton application on vue. There was such a question.
there is a route - list of tasks

{
    path: '',
    name: 'tasks',
    component: Tasks
  }

The Tasks component itself

<template>
  <div>
    <ul v-if="!tasks.isFetching">
      <li v-for="task of tasks" > {{ task.name }}</li>
    </ul>
  </div>
</template>
<script>
import store from '../store/index'

export default {
  beforeRouteEnter (to, from, next) {
    store.dispatch('Tasks')
        .then(() => {
          next()
        })
  }
}
</script>

And storage

export default {
  namespaced: true,
  state: {
    tasks: {}
  },
  mutations: { // Изменения Стора
    tasks: function (state, data) {
      for(let item of data){
        state.tasks[item.pk] = item
      }
    },
  },
  actions: {
    tasks: (context, filter) => {
      axios.get('/tasks/').then((response) => {
        context.commit('tasks', response.data)
      })
    },
  }
}

According to the plan, we get to our list, the beforeRouteEnter of the component fires, calls the storage action, it pulls up the data and writes it with a mutation. The component sees the updated data and shows.
But in fact, the complexity got out, when you go to the address, everything works, but when you directly enter the address, the component does not show anything, although the data is loaded. What could be the problem?

Answer 1

You can try to look at two options:
1. whether isFetching works normally
2. reactivity may break when receiving data. Try to replace in the mutation with:

tasks: function (state, data) {
      let res = {}
      for(let item of data){
        res[item.pk] = item
      }
      state.tasks = res
    },