title: why "Cannot read property 'call' of null" appear when I try to display my component list stocked in local storage?
body: <p>I'm trying to store a list of components in local storage and display it.</p>
  
  <p>The problem is: </p>
  
  <p>I can store my components in the local storage and display it, but, if I reload, all components added after the reload will throw this error: </p>
  
  <pre><code>[Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read property 'call' of null"
  </code></pre>
  
  <p>here is my store:</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  import VuexPersistence from 'vuex-persist';
  import widgets from "./store/widgets";
  
  Vue.use(Vuex);
  
  const vuexLocal = new VuexPersistence({
      storage: window.localStorage,
      modules: ['widgets']
  });
  
  export default new Vuex.Store({
      modules: {
          widgets,
      },
      plugins: [vuexLocal.plugin]
  })
  </code></pre>
  
  <p>I'm using VuexPersistence to access local storage.</p>
  
  <p>Here is my widgets store:</p>
  
  <pre><code>export default {
      state: {
          data: [],
       },
       getters: {
           getWidgets: state =&gt; state.data,
       },
       mutations: {
           setWidget(state, {widget, props}) {
               state.data.push({
                   widget: widget,
                   props: props,
               });
           },
      },
      actions: {
           async addWidget({commit}, {widget, props}) {
               commit('setWidget', {widget, props});
           },
      }
  };
  </code></pre>
  
  <p>This is where is save my components list in local storage.</p>
  
  <p>Here is where I add and display my components:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="body"&gt;
          &lt;div&gt;
              &lt;b-card-group columns&gt;
                  &lt;b-col v-for="widget in widgets" :key="widget.id"&gt;
                      &lt;component :is="widget.widget" :key="widget.widget.name" v-bind="widget.props"&gt;&lt;/component&gt;
                  &lt;/b-col&gt;
              &lt;/b-card-group&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      import cardDailyWeather from "./widgets/cardDailyWeather";
  
      export default {
          name: 'dashboard',
          data: function () {
              return {
                  widgets: [],
              }
          },
          mounted() {
  
              this.$store.dispatch("addWidget", {
                  widget: cardDailyWeather,
                  props: { city: 'Lille' },
              });
  
              this.widgets = this.$store.getters.getWidgets;
  
              // eslint-disable-next-line no-console
              console.log(this.widgets);
          }
      }
  &lt;/script&gt;
  
  &lt;style&gt;
      .body {
          margin: 2%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>In the mounted() method I add a components to the local storage, get the components list from local storage and print it content.</p>
  
  <p>When I run the app for the first time It display well the first component added, but, if I reload to add a new component the second component isn't displayed and throw the error. BUT, the component have been added to the local storage.</p>
  
  <p>When I run first the app the console print:</p>
  
  <pre><code>[{…}, __ob__: Observer]
  </code></pre>
  
  <p>When I reload this app the console print:</p>
  
  <pre><code>(2) [{…}, {…}, __ob__: Observer]0: {__ob__: Observer}1: {__ob__: Observer}length: 2__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}__proto__: Array
  
  vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read property 'call' of null"
  
  found in
  
  ---&gt; &lt;Dashboard&gt; at src/components/widgets/cardDailyWeather.vue
         &lt;Dashboard&gt; at src/components/dashboard.vue
           &lt;App&gt; at src/components/MainPage.vue
              &lt;App&gt; at src/App.vue
               &lt;Root&gt;
  
  vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.
  
  found in
  
  ---&gt; &lt;Dashboard&gt; at src/components/widgets/cardDailyWeather.vue
         &lt;Dashboard&gt; at src/components/dashboard.vue
           &lt;App&gt; at src/components/MainPage.vue
             &lt;App&gt; at src/App.vue
               &lt;Root&gt;
  </code></pre>