При получении ошибок типа не удается прочитать свойства 'contact' и 'name' из undefined

Я изучаю Vuejs, и я пытаюсь разработать форму, и мой браузер пуст, когда я начал разрабатывать этот код в User.vue:

<template>
  <div class="users">
    <h1>Users</h1>
    <form v-on:submit="addUser">
      <input type="text" v-model="newUser.name" placeholder="Enter Name">
      <br />
      <input type="text" v-model="newUser.email" placeholder="Enter Email">
      <br />
      <input type="submit" value="Submit">
    </form>
    <ul>
      <li vi-for="user in users">
        <input type="checkbox" class="toggle" v-model="user.contacted">
        <span :class="{contacted: user.contacted}">
          {{user.name}}: {{user.email}}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'users',
    data() {
      return {
        newUser: {},
        users: [
          {
            name: 'Brad Traversy',
            email: '[email protected]',
            contacted: false
          },
          {
          name: 'Hendrik John',
          email: '[email protected]',
          contacted: false
          },
          {
          name: 'Brooke Dukes',
          email: '[email protected]',
          contacted: false
          }
        ]
      }
    },
    methods: {
      addUser: function(e){
        this.users.push({
          name: this.newUser.name,
          email: this.newUser.email,
          contacted: false
        });
        e.preventDefault();
      }
    },
  }
</script>

<style scoped>
  .contacted{
    text-decoration: line-through;
  }
</style>

Кажется, я получаю Не могу прочитать свойство неопределенных свойств внутри массива users, но я не смог понять, почему.