<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