Vue.jsにてセレクトボックスが選択されていない時、「ジャンルを選択」と記載したいです。

###セレクトボックスが選択されていない時、「ジャンルを選択」と記載したいです。

イメージとしては下記写真の「placeholder」を使用した感じで
入力欄に「ジャンルを選択」と初期表示させたいです。

現状は、空白となってしまっており、クリックすると選択できるのですが、初期表示がない状態です。

セレクトボックスが選択されていない時、このような感じで「ジャンルを選択」と記載したいです。

<select v-model="genre" name="好きなジャンル">

公式のフォーム入力バインディングを参考にして記述しました。

v-model="genre"を追加するとFirestoreにデータを格納することができますが、初期表示が空白に。

また、v-model="genre"を消してあげると、Firestoreにデータは格納されないが
実装したいように初期表示に「ジャンルを選択」と表示されます。

改善策が分かる方いらっしゃいましたら、お力添えをいただきたいです、

よろしくお願いいたします。

###実際のコード

 <select v-model="genre" name="好きなジャンル">
              <option class="post-item" value="ジャンル" hidden>ジャンル</option>
              <option
                v-for="genre in genres"
                :value="genre.name"
                :key="genre"
                class="post-item"
              >
                {{ genre.name }}
              </option>
            </select>

export default {
  data() {
    return {
      genre: "",
      genres: [
        { id: 0, name: "ジャンル" },
        { id: 1, name: "アクション" },
        { id: 2, name: "ドラマ" },
        { id: 3, name: "恋愛" },
        { id: 4, name: "ホラー" },
        { id: 5, name: "戦争" },
      ],
    };
  },