Estoy tratando de mostrar datos en Datatable con vuejs. Lo que hago es que busco los datos en la tienda y los envío al componente para que los muestre en Datatable. La primera vez que funciona después de eso, cuando vuelvo a cargar la página, pierdo todos los datos y la tabla me muestra que no hay datos para mostrar, no sé por qué. Gracias por ayudarme :) Ese es el código:

 <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>