Vue和TypeScript对字符串数组值无反应

Question

我有一个简单的UI，用户可以在其中为表单字段定义1：n映射。该模型非常简单：

export interface IMapping 
    pdfName: string;
    fieldNames: string[];

问题是，对fieldNames的更改没有反应。这是我的表单代码，应可用于编辑和添加新映射。

模板：

<form @submit.prevent>
    <div class="field">
        <label for="pdfName">PDF Field Name</label>
        <input type="text" name="pdfName" id="pdfName" required
            v-model="data.pdfName"/>
    </div>
    <div>
        <fieldset v-for="(fieldName, index) in data.fieldNames" :key="index">
            <legend>Form Field</legend>
            <div class="field">
                <label :for="'name_' + index">Name</label>
                <input type="text" name="name" :id="'name_' + index" required
                    v-model="fieldName"/>
            </div>
            <button @click="removeField(index)" class="removeField"><i class="fas fa-minus"></i></button>
        </fieldset>
        <button @click="addField"><i class="fas fa-plus"></i></button>
    </div>
    <div class="buttonrow">
        <button @click="save">Save</button>
        <button @click="cancel">Cancel</button>
    </div>
</form>

TypeScript组件

import  Component, Emit, Prop, Vue, Watch  from 'vue-property-decorator';

import  IMapping  from '@/models/IMapping';

@Component
export default class MappingForm extends Vue 

    public data: IMapping | null = null;

    @Prop(type: Object)
    private mapping!: IMapping;

    public created() 
        this.data = ...this.mapping;
    

    public addField() 
        this.data!.fieldNames.push('');
    

    public removeField(index: number) 
        this.data!.fieldNames.splice(index, 1);
    

    @Emit('mapping-changed')
    public save() 
        if (this.mapping === null) 
            return this.data;
         else 
            Object.assign(this.mapping, this.data);
            return this.mapping;
        
    

    @Emit('mapping-unchanged')
    public cancel()

我将prop复制到本地变量，因此我可以轻松撤消任何更改，仅在保存时应用它们。它对推送和拼接有反应，但不会更新字符串值。我尝试使用@Watch，但在这种情况下我不确定如何使用它，因为我没有聆听的方法，只有用户输入<input type="text" name="name" :id="'name_' + index" required v-model="fieldName"/>