Vue.jsの画面フォーム内にプレースホルダーを入れたい時

Vue.jsで画面を実装しているときにフォームを作成する時があるかと思います。
このフォームで内容が未入力の時に、半透明の文字で何を入力するか説明文を入れたいという場合があるかと思います。

この入力を促す書き方には名前があり、プレースホルダーと呼ばれています。
言葉通りの意味だと、「仮のデータや指示を入れるための一時的な場所」といった意味になります。
これを入れることで、未入力のフォームにあらかじめ説明文を表示させることが出来るようになります。

ではVue.jsではどのように書かれているのでしょうか？

下記のコードはフォーム入力とデータを双方向バインドして、タグ名を編集できるようにする処理となっております。
ですが今の状態で実行すると、フォーム内には何も表示されず、空欄のままです。

  <div class="test-form-space"></div>
  <input
    class="test-form"
    :id="`test-name-${test.id}`"
    v-model="test.testName"
  />
</div>

そのためプレースホルダーを追加してみます。

  <div class="test-form-space"></div>
  <input
    class="test-form"
    :id="`test-name-${test.id}`"
    v-model="test.testName"
    placeholder="テスト名称を入力"
  />
</div>

これでフォーム内にテスト名称を入力という文字が半透明で表示されるようになりました。