I'm trying to display data in Datatable with vuejs. What I do is that I fetch the data in store and I send it to the component to display it by Datatable. First time it works after that when I reload the page I lose all data and the table shows me that there is no data to show I don't know why. Thanks for helping me :) That's the code:

<template>
  <div class="content">
    <table id="studyLevelTable" class="studyLevelTable display table-bordered nowrap" style="width: 100%">
      <thead>
      <tr>
        <th scope="col">#Id</th>
        <th scope="col">Nom</th>
        <th scope="col">Created At</th>
        <th scope="col">Updated At</th>
        <th scope="col">Is Deleted</th>
        <th scope="col">Action</th>
      </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "displayStudyLevels",
  data: function () {
    return {
      dataTable:null,
    }
  },
  computed: {
    ...mapGetters(["getAllStudyLevels"]),
  },
  methods: {
  },
  mounted() {
    console.log("app mounted");
    this.$store.dispatch("getStudyLevels");
      this.dataTable = $('.studyLevelTable').DataTable({
        language: {
          emptyTable: "No Results Found"
        }
      });
    this.getAllStudyLevels.forEach(studyLevel=>{
      this.dataTable.row.add([
        studyLevel.id,
        '<a href="#">'+studyLevel.name+'</a>',
        studyLevel.createdAt,
        studyLevel.updatedAt,
        studyLevel.is_deleted,
        '<button class="updateButton" @click="submit">Update</button>'
      ]).draw(false)
    })
  }
}
</script>