<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