編集フォームでvueのdataが更新されない

Question

前提・実現したいこと

プログラミング初心者です。

laravelとvue.jsを使用したSPAのタスク管理アプリを作成しています。
新規作成画面、削除画面は実装できており、編集画面の実装に取り組んでいます。
タスク(board)のtitleをフォームで編集し、データを更新したいです。

【流れ】
➀APIから該当タスク(board)のデータを受け取り、boardにres.data代入する
➁board.titleをフォームで編集する
➂boardオブジェクトをまるごとAPIに渡し、updateする

発生している問題・エラーメッセージ

初期値を入れたフォームに変更を加え、送信ボタンを押すと、
変更前の値がAPIに渡されてしまいます。

該当のソースコード

<template>
    <v-dialog v-model="dialog" @click:outside="clearForm" max-width="500">
        <template v-slot:activator="{ on, attrs }">
            <v-btn fab small color="white" elevation="0" v-bind="attrs" v-on="on" @click="getBoard">
                <v-icon color="blue-grey">far fa-edit</v-icon>
            </v-btn>
        </template>
        <v-card>
            <v-card-title>
                <span class="headline">Edit Board Title</span>
            </v-card-title>
            <v-card-text>
                <v-container>
                    <v-form ref="form" v-on:submit.prevent="submit">
                        <div class="errors" v-if="errors">
                            <ul v-if="errors.title">
                                <li v-for="msg in errors.title" :key="msg">{{ msg }}</li>
                            </ul>
                        </div>
                        <v-row>
                            <v-col cols="12">
                                <div class="form-group">
                                    <v-text-field v-model="board.title" label="Board Title" counter maxlength="45" id="board-title"
                                        :rules="[required, length]" filled rounded dense></v-text-field>
                                </div>
                                <div class="d-flex justify-center">
                                    <v-btn type="submit">Submit</v-btn>
                                </div>
                            </v-col>
                        </v-row>
                    </v-form>
                </v-container>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>

<script>
import { CREATED, UNPROCESSABLE_ENTITY } from '../../util';

export default {
    props: {
        boardId: Number
    },
    data () {
        return {
            board: {},
            oldTitle: '',
            dialog: false,
            errors: null,
            required: value => !!value || 'Required.',
            length: value => (value && value.length <= 45) || 'Max 45 characters.',
        }
    },
    methods: {
        getBoard() {
            axios.get('/api/boards/' + this.boardId)
                .then((res) => {
                    this.board = res.data;
                    this.oldTitle = res.data.title;
            });
        },
        clearForm() {
            if (this.board.title != this.oldTitle) {
                this.$refs.form.reset();
                this.board.title = this.oldTitle;
            }
            this.errors = null;
        },
        async submit() {
            const res = await axios.put('/api/boards/' + this.boardId, this.board);

            if (res.status === UNPROCESSABLE_ENTITY) {
                this.errors = res.data.errors;
                return false;
            }

            if (res.status !== CREATED) {
                this.$store.commit('error/setCode', res.status);
                return false;
            }

            this.$emit("EditBoard", { res: res.data });
            this.clearForm();
            this.dialog = false;
        }
    }
}
</script>

<style scoped>
</style>

試したこと（確認できたこと）

・vueのdevツール上では、dataのboard.titleの変更が反映されている
・submit()すぐ下でconsole.log(this.board)を実行し、title箇所を確認すると変更前の値が入っている
・submit()すぐ下でconsole.log(this.board.title)を実行し、確認すると変更後の値が入っている

【例：title1からtitle111に変更した場合】
console.log(this.board)
→{
    "id": 1,
    "title": "title1",
    "created_user_id": 1,
    "updated_user_id": 1,
    "deleted_user_id": null,
    "created_at": "2021-03-10 17:05:33",
    "updated_at": "2021-03-10 19:28:16",
    "deleted_at": null,
    "users": [
        {
            "id": 1,
            "name": "user_name_1",
            "email": "[e-mail]",
            "email_verified_at": null,
            "created_at": "2021-03-10 17:05:33",
            "updated_at": "2021-03-10 19:37:20",
            "deleted_at": null,
            "pivot": {
                "board_id": 1,
                "user_id": 1,
                "created_at": null,
                "updated_at": null
            }
        }
    ]
}
console.log(this.board.title)
→title111

Answer 1

board:{}

Vueのdataに入っているオブジェクトに動的にプロパティを生やすことはできない。

どうしてもやりたければ明治的にVue.setで追加する必要がある

詳しくはリアクティブの探求を読んでください