Vue.js 配列の一部の変更をリアルタイムで反映したい

Question

##機能
####初期状態
ステータス変更用のラジオボタン
[●OK][○NG]

OKとNGのリスト並んでいる状態
【OK】【NG】【NG】【OK】【OK】【NG】

##やりたいこと
ラジオボタンで選択しているステータスで【　】をクリックするとそのステータスの文字に変更する

##できていないこと
クリック時にリアルタイムで反映されない
(ぽちぽちクリックしたあとにラジオボタンのステータスを変更するとなぜかそのときに変更が反映される)

##試してみたこと
v-bindを使うと思ったので、ループの一番外で
v-bind="arrayList"としたが変わらなかった

<input type="radio" name="hoge" value="1" v-model="picked">
<input type="radio" name="hoge" value="2" v-model="picked">

<template v-for="(array, key) in arrayList">
  <div @click="changeStatus(picked, key)">
    <template v-if="array.status == 1">
      <p class="ok">【OK】</p>
    </template>
    <template v-else-if="array.status == 2">
      <p class="ng">【NG】</p>
    </template>
  </div>
</template>

<script>
    export default {
        data() {
            return {
              picked: '1',
            }
        },
        props: {
            arrayList: {
                type: Array
            }
        },
        methods: {
            changeStatus(picked, key) {
                this.arrayList[key].status = picked
            }
        }
    }
</script>

Answer 1

propsの中身を this.arrayList[key].status = picked で上書きしているのがよくないらしく、

data() {
    arrayList: this.propsArrayList
},
props: {
    propsArrayList: {
        type: Array
    }
}

のようにするとうまく動きました(いろいろいじったのでこれが原因じゃないかもしれませんが)

この記事を参考にしました
https://kic-yuuki.hatenablog.com/entry/2019/01/05/144610