<template>
   <p>Fruits: {{ count }}</p>
  </template>
  
  <script>
  import basket from '../resources/fruit-basket'
  
  export default () {
   computed: {
    count () {
     return basket.state.fruits.length
     // Or return basket.getters.fruitsCount
     // (depends on your design decisions).
    }
   },
   watch: {
    count (newCount, oldCount) {
     // Our fancy notification (2).
     console.log(`We have ${newCount} fruits now, yaay!`)
    }
   }
  }
</script>

  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  const basket = new Vuex.Store({
   state: {
    fruits: []
   },
   getters: {
    fruitsCount (state) {
     return state.fruits.length
    }
   }
   // Obvously you would need some mutations and actions,
   // but to make example cleaner I'll skip this part.
  })
  
  export default basket