vuejs router.go(-1) not showing on second time - vue.js

Question

I'm currently using vue-router to manage the differents Vue of my project.
My main.js
import Vue from 'vue'
import App from './App.vue'
import jQuery from 'jquery'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
global.jQuery = jQuery
global.$ = jQuery
import './assets/css/animate.css'
import router from './router'
import store from './vuex'
Vue.config.productionTip = false
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
When I'm on my dashboard ('/dashboard') for the first time, the 'created' methods is called. Data are retrieved from the API and shows up in my array.
After that I click on one element of my array that route me to '/details/:id' (with id the id of my element). Everything works well and then I click on a 'Go back' button.
I finish again on my dashboard page, i see that the 'create' methods is called again, data are well retrived from the API but nothing shows up and my array stays empty.
I really don't understand why.
There is the code of the the 'created' function:
export default {
created: function() {
console.log('created => dashboard');
let store = this.$store;
let q = this.rows;
//get rows
if (store.state.socket.io._callbacks["$rows"] == undefined) {
console.log("Binding rows");
//Where I receive the rows from API
store.state.socket.io.on("rows", data => {
console.log("rows reponse:", data);
if (data.success) {
this.nbrItems = data.rows.length;
q.splice(0, q.length); //Clean the array without replacing the instance
data.rows.map(a => q.push(a));
console.log("Queue length: " + q.length);
}
});
}
//get the queue
this.refresh(); // This send a request to the API to ask it to send us back the datas
},
And I use this.$router.go(-1) to navigate back on the '/dashboard' page.
Edit: Is there a problem of state or something like that? I do not understand why, because in-memory I can access to all data, there is just no more binding anymore...

Answer 1

Do you pop every element of the array before you call the created function?
I'm still an apprentice but it seems to me like you have to pop everything before adding new elements to the array.

Answer 2

I figure it out:
The problem was coming from socket.io. I'm checking if the event is bind already before to subscribe to a function and this function contains 'this' that was still referring to the previous Vue instance.
Simply fixed by replacing this:
//get rows
if (store.state.socket.io._callbacks["$rows"] == undefined) {
console.log("Binding rows");
//Where I receive the rows from API
store.state.socket.io.on("rows", data => {
console.log("rows reponse:", data);
if (data.success) {
this.nbrItems = data.rows.length;
q.splice(0, q.length); //Clean the array without replacing the instance
data.rows.map(a => q.push(a));
console.log("Queue length: " + q.length);
}
});
}
by this:
if (store.state.socket.io._callbacks["$rows"] != undefined) {
store.state.socket.io.off("rows");
}
console.log("Binding rows");
store.state.socket.io.on("rows", data => {
console.log("rows reponse:", data);
if (data.success) {
this.nbrItems = data.rows.length;
q.splice(0, q.length);
data.rows.map(a => q.push(a));
console.log("Queue length: " + q.length);
}
});
But this makes me wonder, if I can still access to a previous Vue instance is it meaning that it will be some kind of memory leak with time?
I suppose that no with the garbage collector but would mean that nothing else refers to the previous instance.