Vue JS v-модель не работает

Я только начинаю изучать Vue JS из предоставленной документации и использую Vue CLI для проекта. При использовании директивы v-model я не получаю ожидаемого результата.

<template>
  <div class = "AddData">
      <header>
        <h2>Add Data</h2>
      </header>
      <section>
        <form id = "form" name = "form">
            <label for = "Name" id = "NameLabel" v-model = "NameModel">Name</label>
            <input type = "text" name = "Name" id = "NameInput"><br>
            <label for = "Good" id = "GoodLabel">Good</label>
            <input type = "text" name = "Good" id = "GoodInput"><br>
            <label for = "Bad" id = "BadLabel">Bad</label>
            <input type = "text" name = "Bad" id = "BadInput"><br>
            <label for = "Picture" id = "PictureLabel">Picture Link</label>
            <input type = "text" name = "Picture" id = "PictureInput"><br>
        </form>
      </section>
      <p>Entered Data is {{NameModel}}</p>
  </div>
</template>

<script>
export default {
  name: 'AddData',
  data () {
    return {
      msg: 'This Page is for Adding Data',
      NameModel: ''
    }
  }
}
</script>

Имя, которое я ввожу, не обновляется в теге «p». Что я здесь делаю не так?