为什么在Info.Vue里面使用store.state.count视图不会自动更新呢

<template>
  <div>
    hello info
    <div>{{count}}</div>
    <button type="button" @click="add()">添加</button>
  </div>
</template>

<script>
import store from '@/store';

export default {
  name: 'Info',
  store,
  data() {
    return {
      count: store.state.count,
    };
  },
  methods: {
    add() {
      console.log('add Event');
      store.commit('increase');
    },
  },
};
</script>