vue.cli(vue.js)の連想配列の扱い。

現在　todoリストの作成課題でvue.cliを用いて作成しています。
イメージ説明
そこで添付画像のマウスがあるところのようにtodoリストのそれぞれの行に
クリックすると作業中と完了を切り替えられる、ボタンを作る過程で詰まってしまっています。
リストの追加はstatus(作業中か完了)とtask（task内容）連想配列を追加してそれをテーブルに反映させています。
spliceで配列ごと変更してしまうと、フォームで入力した作業内容（task）も変更されてしまいます。
連想配列のstatusの部分だけを変える良い方法はないでしょうか？？

試したこと。
・今上げているコードのように一度配列を全て消して、再度追加する。ー＞そもそもなにもおこらない。
・this.todos[this.index].status = '完了'のように
statusだけ変更するようにしましたが、うまくいきません。

vue.js
<template>
  <body>
    <h1>ToDoリスト</h1>
    <input type="radio" v-model="allButton" checked="checked">すべて
    <input type="radio" v-model="workButton" >作業中
    <input type="radio" v-model="finishButton" >完了
    
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>コメント</th>
          <th>状態</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(todo,index) in todos" :key="index" >
            <td>{{index + 1}}</td>
            <td>{{todo.task}}</td>
            <td><input type="button" @click="ChangeStatus" :value="todo.status"></td>
        </tr>
      </tbody>
    </table>
    <p>{{todos}}</p>
   
    <h1>新規タスクの追加</h1>
    <input v-model="newTask" type="text">
    <input type="button" value="追加" @click="AddTasks">
  </body>
</template>

<script>

export default {

  data() {
    return{
      newTask:'',
      todos:[ ],
      id:'',
    }
  },
  methods: {
    AddTasks() {
      this.todos.push(
        { task: this.newTask, status: '作業中' }
      )
    },
    ChangeStatus(){
      if(this.value === '作業中'){
        const finish = {task: this.newTask, status:'完了'};
        this.todos.splice(this.index,1);
        this.todos.push(this.index,1,finish);
        
      }else{
        this.value = '作業中'
      }
    },
   
  }
};
</script>