Vue.jsで動的に要素変更

配列に動的に値を追加して描画できなかったので、Obejctにしなさいよという教訓から書きます
間違い等ありましたら、ご指摘していただけると幸いです。

リアクティビティ

Vue は、配列における次の変更は検知できません:
インデックスと一緒にアイテムを直接セットする場合、例えば vm.items[indexOfItem] = newValue
配列の長さを変更する場合、例えば vm.items.length = newLength

上記の内容に引っかかって配列にひたすらpushして悩んでいました。(ちゃんとドキュメント読もうね...)
またリアクティブプロパティの宣言も行っておらず、カオスな状況でしたので原因の発見に遅れました。

Paramedit.vue

<template>
  <form id="form">
    <table border="1">
      <tr v-for="(sec, index) in task.params" :key="index">
        <td>Name</td>
        <td><input v-model="sec.Name" /></td>
        <td>Path</td>
        <td><input v-model="sec.ValueFrom" /></td>
        <td><button @click.prevent="deleteParam(index)">削除</button></td>
      </tr>
    </table>
    <a @click.prevent="addParam">追加</a>
  </form>
</template>

<script>
export default {
  data() {
    return {
      // 更新対象
      task: {
        // リアクティブプロパティの宣言必須
        // params: [],
        params: [
          { Name: "test1", ValueFrom: "test/path/1" },
          { Name: "test2", ValueFrom: "test/path/2" },
        ],
      }
    };
  },
  created() {},
  methods: {
    deleteParam: function (id) {
      let self = this;
      self.task.params.splice(id, 1);
    },
    addParam: function () {
      let self = this;
      // dataに入れておくと直前のデータが入力されていた
      let addForm = { Name: '', ValueFrom: '' };
      self.task.params.push(self.addForm);
    },
  },
};
</script>