【Vue.js】親コンポーネントから渡されたpropsをv-modelに使用する

すぐに思いつくのは以下のようなコードですが、これではpropsの値をそのまま書き換えようとして警告が出てしまいます。

<template>
  <textarea rows="10" v-model="itemBody"></textarea>
</template>

<script>
export default {
  props: {
    itemBody: {
      type: String,
      required: false,
      default: null
    },
  // ...

警告を回避するには、v-modelをプロパティへのバインドとイベント発火とにバラします。

<template>
  <textarea rows="10" :value="itemBody" @input="form.body=$event.target.value"></textarea>
</template>

<script>
export default {
  props: {
    itemBody: {
      type: String,
      required: false,
      default: null
    },
  data() {
    return {
      formBody: this.itemBody
    }
  },
  // ...