[Vue] 子コンポーネントでpropsを自由に扱いたい

Question

前提・実現したいこと

一覧ページコンポーネント（親）があり、一覧表示されているデータにそれぞれ「編集」というボタンがあります。
編集ボタンをクリックすると、フォームコンポーネント（子）がダイアログで表示されます。
その際、一覧ページコンポーネント（親）はフォームコンポーネント（子）へクリックしたデータの情報をpropsで渡します。
バックエンドAPIへのPUTは、フォームコンポーネントが行うため、フォームコンポーネントでpropsを自由に扱いたいのですが、
こういった実装はおかしいのでしょうか...?以下にコードを掲載します。
子コンポーネントで受け取ったpropsを、子コンポーネントのdataプロパティに代入してリアクティブな感じにできると良いですが、
最初のみしか動作しないので...。
子コンポーネントのcomputedで入力フォームとバインディングしているのですが、変更があった場合にしかセッターでdataにセットできないんですよね...。

// 一覧ページコンポーネント
<template>
      <v-data-table
        :headers="headers"
        :items="items"
        item-key="id"
        :items-per-page="7"
      >
        <template v-slot:item.action="{ item }">
          <v-btn fab small color="indigo" outlined @click="editItem(item)">
            <v-icon>mdi-pencil</v-icon>
          </v-btn>
          <v-btn
            fab
            small
            color="indigo"
            outlined
            class="mx-1"
            @click="deleteData(item.id)"
          >
            <v-icon>delete</v-icon>
          </v-btn>
        </template>
        <router-link to="/record/" + item.id>detail</router-link>
      </v-data-table>
      <FormModal
        :visible="dialog"
        :idData="editedItem.id"
        :dateData="editedItem.date"
        :weightData="editedItem.weight"
        :commentData="editedItem.comment"
        @close="dialog = false"
      />
</template>

<script>
export default {
  name: "Index",
  components: {
    FormModal,
  },
  data() {
    return {
      detailDialog: false,
      dialog: false,
      editedItem: {
        id: 0,
        weight: 0,
        date: "",
        comment: "",
      },
      editedIndex: -1,
    };
  },
  mounted() {
    this.$store.dispatch("getWeightsDatas");
  },
  methods: {
    editItem(item) {
      this.editedIndex = this.items.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
      console.log(this.editedItem);
    },
  },
};
</script>

<template v-slot:append>
  <v-dialog v-model="show" persistent :retain-focus="false" max-width="600px">
    <v-card id="form">
      <v-card-title>フォーム</v-card-title>
      <v-card-text>
        <v-form ref="form">
          <v-date-picker
            v-model="innerDate"
            label="記録日"
            :rules="[required]"
          ></v-date-picker>
          <v-text-field
            v-model.number="innerWeight"
            label="入力必須で文字数制限のあるテキストフィールド"
            placeholder="体重の数値"
            type="number"
            :rules="[required]"
          >
          </v-text-field>
          <v-textarea
            v-model="innerComment"
            label="コメント"
            clearable
            filled
            shaped
            counter
          >
          </v-textarea>
          <p v-show="notNumber">数値ではありません</p>
          <v-divider></v-divider>
          <v-card-actions>
            <v-btn test v-on:click="submit">送信する</v-btn>
            <span v-if="success">投稿しました!</span>
          </v-card-actions>
          <v-spacer></v-spacer>
          <v-card-actions>
            <v-btn color="grey" text @click.stop="show = false"> 閉じる </v-btn>
          </v-card-actions>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
import firebase from "@/plugins/firebase";
export default {
  name: "FormModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: false,
    },
    idData: {
      type: Number,
      default: null,
      required: true,
    },
    dateData: {
      type: String,
      default: "",
      required: false,
    },
    weightData: {
      type: Number,
      default: null,
      reqiured: false,
    },
    commentData: {
      type: String,
      default: "",
      required: false,
    },
  },
  data() {
    return {
      id: null,
      date: "",
      weight: null,
      comment: "",
      success: false,
    };
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(value) {
        if (!value) {
          this.$emit("close");
        }
      },
    },
    innerId: {
      get () {
        return this.$props.idData
      },
      set (newValue) {
        this.id = newValue
      }
    },
    innerDate: {
      get () {
        return this.$props.dateData
      },
      set (newValue) {
        this.date = newValue
      }
    },
    innerWeight: {
      get () {
        return this.$props.weightData
      },
      set (newValue) {
        this.weight = newValue
      }
    },
    innerComment: {
      get () {
        return this.$props.commentData
      },
      set (newValue) {
        this.comment = newValue
      }
    },
    notNumber() {
      const value = Number(this.weight);
      return Number.isNaN(value);
    },
  },
  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        console.log(this.hogepiyo);
        this.axios({
          method: this.$props.httpMethod,
          url: "http://localhost:3000/weights/" + this.id,
          params: {
            date: this.date,
            weight: parseFloat(this.weight),
            comment: this.comment
          },
        })
          .then(
            function (response) {
              this.$emit("close");
            }.bind(this)
          )
      } else {
        this.success = false;
      }
    },
  },
};
</script>

試したこと

子コンポーネントのcomputedで以下を行う=>しかしデータを変更しなかった場合にセッターが作動しないので、変更した値しか扱えない。

computed: {
   innerId: {
     get (){ return this.$props.idData; },
     set (value){ this.id = value;  }
   }
}

ここにより詳細な情報を記載してください。