【Vue.js】読取専用の変数はv-modelには設定してはいけない

前提

• Vueに始めて触れたのは「Vue.js 3.x」から
• 一般的なHTMLは習得
• AngularやPHPはかじったことがある

きっかけ

Vueのことを少しずつ習得しつつある中でろCmputedを覚えそのComputedをv-modelに設定して実装をしてしまいました。
そのときVueに精通してる方から「なぜComputedをここに設定しているの？」と問われ
「v-modelに決まりとかあったの？？？」となったことがきっかけです。

v-modelとは

公式リファレンスにもあるようにv-modelとは「v-bind」と「v-on」の機能が合体したものです。

<input
  v-bind:value="nameText"
  v-on:input="nameText = $event.target.value"
>

v-model

<input v-model="nameText">

間違っていたこと

きっかけとしてはComputedの扱っていたことで分かったことですが、このv-modelは前述にあるようにv-on:inputしているため、v-modelとして設定されているものに対して書き込みを行ってしまいます。
ここでは触れませんが、「Computed」は基本的に読取専用です。書き込みを想定するのであれば「Writable Computed」という書き込みも想定しているものを使用するのが適切です。
そのため、定数や画面操作によって値が書き換わる想定をしていない変数などはv-modelに設定してはいけません。

NG

<script setup lang="ts">
    const firstName = ref('');
    const lastName = ref('');
    const nameText = computed(() => `${firstName.value} ${lastName.value}`);

</script>

<template>
    <!--入力用-->
    <input
      v-model:firstName
    >
    <input
      v-model:lastName
    >

    <!--表示用-->
    <input
      v-model:nameText
    >
</template>

OK

<script setup lang="ts">
    const firstName = ref('');
    const lastName = ref('');
    const nameText = ref('');
    const nameTextWrite = computed({
        get: () => nameText.value,
        set: (value) => {
         name.Text.value = `${firstName.value} ${lastName.value}`;
        }
    });

</script>

<template>
    <!--入力用-->
    <input
      v-model:firstName
    >
    <input
      v-model:lastName
    >

    <!--表示用-->
    <input
      v-model:nameText
    >
</template>

まとめ

なんとなく便利だなぁ～ぐらいの気持ちでVueを使っていましたが、設定するものによってvueの機能も使い分けなくてはいけないのだと思い知りました。（当たり前だけど）