Почему не работает реактивность (VUEX)?

Question

LionG @LionG

Vue.js

Почему не работает реактивность (VUEX)?

Пытаюсь написать модуль уведомлений под VUEjs используя хранилище.

notify.js

export default {
    state: {
        Notifyes: [
            {title:'Default notify', desc:'some desc', type:'info', timeout:false}
        ]
    },
    getters: {
        Notifyes(state) {
            console.log('getter Notifyes');
            return state.Notifyes;
        }
    },
    mutations: {
        addNotify(state, notify = {title:'Empty notify', desc:'', type:'error', timeout:false}) {
            //types: danger warning success info primary secondary light
            console.log('mutation addNotify');
            state.Notifyes.push(notify);
        }
    },
    actions: {
        addNotify(ctx, notify) {
            console.log('action addNotify ');
            ctx.commit('addNotify', notify);
        }
    }
}

Notifyes.vue

<template>
    <div class="notifyes">
      <notify v-for="(Notify, id) in Notifyes"
              v-bind:key="id"
              v-bind:title="Notify.title"
              v-bind:desc="Notify.desc"
              v-bind:type="Notify.type"
      >
      </notify>
    </div>
</template>

<script>
  import Notify from './components/Notify.vue'
  import {mapGetters} from "vuex";

  export default {
    name: 'notifyes',
    computed: {
      ...mapGetters(['Notifyes'])
    },
    mounted() {
      console.log('mounted');
    },
    updated() {
      console.log('updated');
    },
    components: {
      Notify
    }
  }
</script>

В одной из частей приложения импортировал и вызываю addNotify({title:'Hello world', desc:'And welcome to plugin!', type:'success', timeout:false});

Лог:

getter Notifyes
mounted
action addNotify 
mutation addNotify
action addNotify 
mutation addNotify
action addNotify 
mutation addNotify
action addNotify 
mutation addNotify

"уведомление по умолчанию" выводится, а вот дальнейшие изменения не вызывают никаких событий. По идее при добавлении порядок должен быть такой:

action addNotify 
mutation addNotify
updated

Почему не вызывается updated ведь Notifyes обновлен ?

Пробовал Notifyes объявлять в (data, computed, methods) в помощью (mapState и mapGetters). Реактивность не работает. Если внести изменения в код и сохранить то видимо срабатывает горячая замена и в консоль разово попадают mounted и затем updated.

UPD: капался в сроении и нашел интересный путь. Видимо из за того что хранилище notify я вынес в отдельный файл - его путь немного поменялся. Если использовать код ниже то реактивность начинает работать:

data: function() {
    return {
        Notifyes: this.$store.state.Notify.Notifyes
    }
},

По сути mapState([Notifyes]) == (Notifyes = this.$store.state.Notifyes). И mapState([Notifyes]) сработал бы если бы хранилище уведомлений было бы глобальным.