TODOアプリで期限○月○日というタスクを表示させ、cloud firestoreに月、日データを保存したい

Question

前提・実現したいこと

現在nuxtでTODOアプリを作成中です。DBはcloud firestoreを使用しています。
TODOを入力するtextの隣にプルダウンで月日が選択できるようになっています。
textに文字を入力し、月日を選択してTODOを追加ボタンを押すとそれがDBに保存されて尚且つ、
DOMに反映させるように実装したいのですがうまくいかずに悩んでいます。
ちなみに下記のエラーメッセージが表示されます。

発生している問題・エラーメッセージ

Function addDoc() called with invalid data. Unsupported field value: undefined (found in field month in document todos/8avIZCvau8utj6ttWYQ9)

無効なデータで関数 addDoc() が呼び出されました。サポートされていないフィールド値: 未定義 (ドキュメントの日付フィールドにあります)
翻訳するとこういう意味らしいです。

該当のソースコード

storeディレクトリのsampleディレクトリの中のindex.jsフォルダです

import firebase from '~/plugins/firebase'
import { firestoreAction } from 'vuexfire'

const db = firebase.firestore() //データベースはfirebase.firestore
const todosRef = db.collection('todos')//コレクション名はtodos

export const state = () => ({
  todos: [],
})

export const actions = {
  init: firestoreAction(({ bindFirestoreRef })=>{
    bindFirestoreRef('todos', todosRef)
  }),
  add: firestoreAction((context, name, month, day) => {
    if(name.trim()){ 　　//入力値が空白ではないか確認
      todosRef.add({
        name: name,
        month: month,　　//ここです
        day: day,　　　　//ここです
        done: false,
        created: firebase.firestore.FieldValue.serverTimestamp()

        
      })
    }
  }),
  remove: firestoreAction((context, id) => {
    todosRef.doc(id).delete()
  }),
  toggle: firestoreAction((context, todo) => {  //todoの完了未完了
    todosRef.doc(todo.id).update({
      done: !todo.done
   })
  }),  
}

export const getters = {
  orderdTodos: state => {
   return _.sortBy(state.todos, 'created')
   //state.todosの値をcreatedでソートして返す、orderdTodosという名前でコンポーネントから呼び出す
  }
}

addが追加機能です。firestoreActionの引数に月はmonth、日はdayを入れています。

todos.vue

<template>
  <div app>
    <div class="page">
      <ul>
        <li v-for="todo in todos" :key="todo.id">
          <!-- todoのcreatedに値がある時だけspanで囲ったtodoの要素を描画 -->
          <span v-if="todo.created">
            <button @click="remove(todo.id)">×</button>
            <input
              type="checkbox"
              :checked="todo.done"
              @change="toggle(todo)"
            />
            <!-- firestote上のデータに基づいてチェックボックスのオンオフを切り替え -->
            <!-- changeで選択肢が変更された時に発火する toggleメソッドを呼び出す -->
            <span :class="{ done: todo.done }">
              <!-- doneの値がtrueだったらdoneクラスが設定される -->
              {{ todo.name }} {{ todo.created.toDate() | dateFilter }}
              {{ todo.month }}月{{ todo.day }}日
            </span>
          </span>
        </li>
      </ul>
      <form @submit.prevent="add">
        <!-- addTodoを押したときにページがリロードされないようにする -->
        <input v-model="name" type="text" placeholder="Todoを追加" />
        <!-- <input type="date" name="date" v-model="date" value="date" /> -->
        <select name="month" size="1" v-model="month">
          <option value="" hidden>Month</option>
          <option v-for="month in 12" :key="month" :value="month">
            {{ month }}月
          </option>
        </select>
        <select name="day" size="1" v-model="day">
          <option value="" hidden>Day</option>
          <option v-for="day in 31" :key="day" :value="day">{{ day }}日</option>
        </select>
        <button type="submit">Todoを追加</button>
      </form>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  created() {
    this.$store.dispatch("sample/init");
  },
  data() {
    return {
      name: "",
      month: "",
      day: "",
      done: false,
    };
  },
  computed: {
    todos() {
      // return this.$store.state.sample.todos;
      return this.$store.getters["sample/orderdTodos"];
      //  vuexのsample/index.jsからリストを以降
      //storeのstateのsample/index.jsの中のtodos
    },
    user() {
      return this.$store.getters["user"];
    },
  },
  filters: {
    dateFilter(date) {
      return moment(date).format("YYYY/MM/DD HH:mm:ss");
    },
  },
  methods: {
    //  ボタンを押したらTodoを追加
    add() {
      this.$store.dispatch("sample/add", this.name, this.month, this.day);

      this.name = "";
      this.month = "";
      this.day = "";
    },

    //  Todoの削除
    remove(id) {
      //idはfirestoreのドキュメントid
      this.$store.dispatch("sample/remove", id);
    },
    toggle(todo) {
      this.$store.dispatch("sample/toggle", todo);
    },
  },
};
</script>

<style>
li > span > span.done {
  text-decoration: line-through;
}
</style>

試したこと

index.jsの
month:month
day:day
の値をそれぞれ''で囲んでstring型にすると反映されます。
只、表示はあくまでもそのまま文字列として表示されてしまいます。

もしわかりそうな方いらっしゃいましたらヒントでも良いので教えていただけるとありがたいです。
宜しくお願いします。

補足情報（FW/ツールのバージョンなど）

以下package.jsonより

"@nuxtjs/axios": "^5.12.2",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/proxy": "^2.1.0",
"core-js": "^3.6.5",
"firebase": "^8.2.1",
"moment": "^2.29.1",
"nuxt": "^2.14.6",
"nuxt-webfontloader": "^1.1.0",
"vuex": "^3.6.0",
"vuexfire": "^3.2.5"

Comments

[gouf]

GitHub にコードは公開していますか?

[gouf]

> 表示はあくまでもそのまま文字列として表示されてしまいます

期待する動作はどのようなものですか?