How to watch localstorage in Vue.js 2

Question

How do I know about changes in Banana.vue?

I using, addEventListener, @watch... But, not working........................

index.vue is import Apple.vue, Banana.vue

in Apple.vue
localStorage.setItem('fruit', 'apple)

in Banana.vue

@watch(localStorage.getItem('fruit' || '')
    changeFruit() {
    this.fruit = localStorage.getItem('fruit')
}

Answer 1

use getter and setter

data() {
    return {
      get token() {
        return localStorage.getItem('token') || 0;
      },
      set token(value) {
        localStorage.setItem('token', value);
        this.fruit = localStorage.getItem('fruit')

      }
    };
  }

Answer 2

LocalStorage is not reactive but you can access the localStorage value in the component like this :

Vue.component('apple', {
  props: ['childmsg'],
  template: '<p>{{ childmsg }}</p>',
  mounted() {
    localStorage.setItem('fruit', 'apple');
  }
});

Vue.component('banana', {
  data: {
    fruit: ''
  },
  props: ['childmsg'],
  template: '<p>{{ childmsg }}</p>',
  mounted() {
    if (localStorage.fruit) {
      this.fruit = localStorage.fruit;
      console.log(this.fruit);
    }
  }
});

var app = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <apple childmsg="This is Apple"></apple>
  <banana childmsg="This is Banana"></banana>
</div>