title: (Nuxt) Page not re-rendering data on reload
body: <p>I am trying create a to fetch data from the server and show them to the user. But the issue is that nothing apart from the dummy information is displayed.</p>
  <p>Basically there are two scenarios:</p>
  <p><strong>1. Navigating to the page from some other link (This works as expected)</strong></p>
  <p>Explanation: Such as going from http://localhost:3000/ to http://localhost:3000/assignments/explore and it renders all the fetched contents as expected.</p>
  <p>Vue plugin ss</p>
  <p><a href="https://i.stack.imgur.com/CYaJ5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CYaJ5.png" alt="enter image description here" /></a></p>
  <p><strong>2. Entering the page directly through the url or press refresh</strong></p>
  <p>Explanation: By directly typing http://localhost:3000/assignments/explore in the url nothing is displayed apart from the dummy card</p>
  <p>Vue plugin ss</p>
  <p><a href="https://i.stack.imgur.com/9D16Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9D16Y.png" alt="enter image description here" /></a></p>
  <p>As you can see the length of the assignment state is 1 instead of 3 and the vuex action saveAssignments is also missing in this case</p>
  <p>Template tag in explore.vue</p>
  <pre><code>...
  &lt;div v-for=&quot;assignment in assignments&quot; :key=&quot;assignment._id&quot;&gt;
     &lt;Card :assignment=&quot;assignment&quot;&gt;&lt;/Card&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  <p>Script Tag in explore.vue</p>
  <pre><code>fetch() {    
    this.$store.dispatch('assignment/fetchAssignment')
  },
  computed: {
    assignments() {
      return this.$store.state.assignment.assignments
    },
   },
  </code></pre>
  <p>assignment.js //Vuex Store</p>
  <pre><code>export const state = () =&gt; ({
    assignments: [ //dummy data
      {
        _id: '5f1295181ebf00dd0070de1',
        title: 'dummy',
        Description: 'asfd',
        Price: 50,
        createdAt: '2020-07-18T06:22:09.037Z',
        updatedAt: '2020-07-18T06:22:09.037Z',
        __v: 0,
        id: '5f12951081ebf00dd0070de1',
      },
    ],
  })
  export const mutations = {
    saveAssignments(state, newAssignments) {
      state.assignments = state.assignments.concat(newAssignments)
    },
  }
  export const actions = {
    async fetchAssignment({ commit }) {
      const data = await this.$axios.$get('assignments')
  
      commit('saveAssignments', data)
    },
  }
  </code></pre>
  <p>Any help will be appreciated</p>