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 warn]: свойство или метод "person" не определены в экземпляре, но на них ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Однако я не понимаю, потому что я определяю peopleHere каквычисленное свойство от Vuex.