Vueでローカルストレージをwatchする

Vueでローカルストレージのwatchはできない

結論を先に述べると、ローカルストレージはリアクティブでないので、Vueのwatchですることはできない。
この記事では代替案を記載する

代替案：storageのチェンジイベントをaddEventListenerに登録する

    mounted: function() {
        this.ls_event_handle = window.addEventListener('storage', this.eventMethod);
    },
    methods: {
        eventMethod: function(event) {
            let new_val = event.newValue;
            let old_val = event.oldValue;
            switch (event.key) {
                case LOCALSTORAGEKEY1 :
                    console.log(new_val);
                    break;

                case LOCALSTORAGEKEY2 :
                    console.log(old_val);
                    break;

                default:
                    console.log(event.key):
                    break;
                default :
                    break;
            }
        }
    },
    destroyed: function() {
        window.removeEventListener(this.ls_event_handle);
    },

代替案：vue-lsを使用する

※ 未検討であるため、リンクのみ記載

vue-ls

参考

• stackcoverflow: Is there any way to 'watch' for localstorage in Vuejs?