Multiple issues running in the background.

I have bootstrapped vue app into a website built using jquery. Each time I go to a specific url, my controller gets fired and it renders the vue app on to the page.

Here is my code for controller:

$('body #content').empty().append('<div class="vue-eReg-container"><div id="vue-app-e-reg" /></div>');
        require(['app/views/vue/e-reg-vue-app/starter'], function (starter) {
            if(app.data.eRegVueAppRef) {
                app.data.eRegVueAppRef.$destroy();
                app.data.eRegVueAppRef = null;
                app.datal('eRegVueAppRef', null);
            }
            starter({venueName: venueName, pmsFolioId: pmsFolioId});
            $('#progressIndicator').modal('hide');
        });

Here is the code inside my starter file:

define(['Vue', 'vue','vuex', 'moment', 'jquery', 'showdown', 'es6-promises','es6-promises-auto'],
    function (Vue, vue, vuex, moment, $, showdown) {

        return function(params){
            Vue.use(vuex);
             require(['vue!app/views/vue/e-reg-vue-app/components/container','app/views/vue/store/store'], function (vueApp,store) {
                var vm1 = new Vue({
                    el:'#vue-app-e-reg',
                    store: store,
                   render: function(h){ return h(vueApp) }
                });
                app.datal('eRegVueAppRef',vm1);
            });
        }
    }
);

As you can see, I am storing the ref for the vue app in localstorage (app.data), and calling a $destroy method each time my controller is run. But for some reason, each time I enter that route which triggers the controller, a new instance is created and adds up to the number of existing instances.

If I visit that route n times, n instances are created and each button click is called n times. Am I missing something?

vikseriq / requirejs-vue

Multiple issues running in the background. #3