Vue.js 굉장히 많은 form을 작성해야할 때

<template>
    <div id="tabContent03" class="tabPage">
        <div class="tbl-group">
            <span class="title">TTS/저장메시지 문안편집</span>
        </div>

        <div style="padding: 10px; height: 707px">
            <ul class="region-group">
                <li v-for="(displayPhrase, index) of localDisplayPhraseList" :key="displayPhrase.displayMessageCode" style="width: 520px; padding: 10px 20px 0 20px">
                    <div style="color: #4de9d7; font-size: 13pt; text-align: left; padding: 0 0 5px 0">[ <input class="inputStyle" type="text" v-model="displayPhrase.displayMessageTitle" /> ] ({{ index + 1 }})</div>
                    <textarea v-model="displayPhrase.displayMessage" class="txtarea" style="height: 170px" rows=""> </textarea>
                </li>
            </ul>
        </div>

        <div class="tbl-group right" style="padding: 0 20px 20px 20px">
            <span>
                <span class="btn-mini-green"><input type="button" style="font-size: 12pt; padding: 10px 20px 10px 20px" value="문안 저장" @click="changeDisplayPhrase" /></span>
            </span>
        </div>
    </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { createNamespacedHelpers } from "vuex";
import { Phrase } from "@/http/define/Phrase";
import { toast } from "@/utils/alert/toast";

const { mapActions: mapFloodActions, mapState: mapFloodState, mapMutations: mapFloodMutations } = createNamespacedHelpers("flood");

@Options({
    name: "DisplayTextList",

    computed: {
        ...mapFloodState({
            displayPhraseList: "displayPhraseList",
        }),
    },

    data() {
        return {
            localDisplayPhraseList: new Array<Phrase>(),
        };
    },

    watch: {
        displayPhraseList(newValue: Array<Phrase>) {
            this.localDisplayPhraseList = [...this.displayPhraseList];
        },
    },

    mounted() {
        if (this.getDisplayPhraseData()) {
            toast({
                title: "전광판 문안정보를 검색하였습니다.",
            });
        }
    },

    methods: {
        changeDisplayPhrase() {
            const payload = {
                displayMessageInfoVOList: this.localDisplayPhraseList,
            };
            if (this.setWholeDisplayPhraseData(payload)) {
                toast({
                    title: "전광판 문안정보를 수정하였습니다.",
                });
            }
        },
        ...mapFloodActions(["getDisplayPhraseData", "setWholeDisplayPhraseData"]),
    },
})
export default class DisplayTextList extends Vue {}
</script>

1. state는 직접 건들면 안 되니 항상 구조분해도 편하게 복사한 다음 복사본으로 v-for를 돌리든지 씹고뜻고맛보고 즐기고 한다는 생각

2. v-model로 편하게 조작 후 해당 값 담는 것도 아래 코드처럼 편하게 담는 다는 생각

const payload = {
  displayMessageInfoVOList: this.localDisplayPhraseList,
};

3. 만약 위 처럼 state에서 받아오는 값이 없다면 객체를 하나 define하여 사용한다는 생각