Vue说属性未定义时

Question

<template>
  <div class="container">
    <div class="row">
      <div class="form-group">
        <label for="nameInput">Name</label>
        <input ref="nameInput" type="text" class="form-control" id="nameInput" placeholder="Brutus Buckeye"></input>
      </div>
    </div>
    <div class="row">
      <p v-for"person in peopleHere">
        {{ person }}
      </p>
      <textarea ref="chatArea" rows="20" :value="textSent"></textarea>
    </div>
    <div class="row">
      <div class="form-group">
        <input ref="chatInput" type="text" class="form-control" id="chatInput"></input>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Chat',
  data: function() {
    return {
    }
  },
  sockets: {
    connect() {
      this.setConnected(true);
    },

    disconnect() {
      this.setConnected(false);
    },

    // Fired when the server sends something on the "chat" channel.
    chat(data) {
    },
  },
  computed: {
    ...mapState('Chat', [
      'connected',
      'peopleHere',
      'textSent',
    ]),
  },
  methods: {
    ...mapMutations('Chat',  [
      'setConnected',
      'setPeopleHere',
      'setTextSent',
    ]),
  },
  mounted() {
  }
};
</script>

Vue抛出此错误：

  

[Vue警告]：属性或方法“ person”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

但是，我不明白，因为我将peopleHere定义为Vuex的计算属性。