Vue.jsで複数の配列dataをv-modelで動的に値を変える方法

Question

前提・実現したいこと

Vue.jsでの実装方法についてご相談になります。

複数並んでいるチェックボックスに対してv-modelで各チェックボックスに同じ配列を渡せばその配列に対してチェックのオンオフにより配列を動的に作り上げる仕様になっているかと思います。

下記のソースコードの例で言えば「array」という配列がそれに該当するのですが、array以外にもarray2という配列も連動して動的に値を変えたいと思っています。

ただ、v-modelに指定できるのは一つのdataのみという認識です。2つの配列dataを動的に値を変更させることは可能なのでしょうか。v-modelを使う方法以外にも何か効率の良いやり方等をご存知の方がいらっしゃいましたらご教授いただけると幸いです。

該当のソースコード

    <div id="app-120">
        <input value="2" type="checkbox" id="checkbox" v-model="array">
        <input value="3" type="checkbox" id="checkbox" v-model="array">
        <input value="4" type="checkbox" id="checkbox" v-model="array">
    </div>
    <script>
        var app120 = new Vue({
            el: '#app-120',
            data: { array:[],
                    array2:[]★この配列も合わせて動的に変更させたい
                  }
        })
    </script>

Answer 1

arrayをwatchで監視し、変更されたタイミングでarray2へコピーできます。

DEMO

<div id="app-120">
   <div class="mb-1">
     <input value="2" type="checkbox" id="checkbox" v-model="array">
     <input value="3" type="checkbox" id="checkbox" v-model="array">
     <input value="4" type="checkbox" id="checkbox" v-model="array">
   </div>
  <pre>array: {{ array }}</pre>
  <pre>array2: {{ array2 }}</pre>
</div>
<script>
var app120 = new Vue({
  el: "#app-120",
  data: { array: [], array2: [] },
  watch: {
    array(value) {
      this.array2 = value;
    }
  }
});
</script>

参照

• 算出プロパティとウォッチャ — Vue.js

Answer 2

投稿者本人ですが、一旦こんな感じで記述しようと思います。
明日まで一応オープンしておきますのでこれより良い記述方法等がありましたらご回答頂けますと幸いです。。

---
    <div id="app-120">
        <input value="2" type="checkbox" id="checkbox" v-model="array" @click="changeArray2($event)">
        <input value="3" type="checkbox" id="checkbox" v-model="array" @click="changeArray2($event)">
        <input value="4" type="checkbox" id="checkbox" v-model="array" @click="changeArray2($event)">
    </div>
    <script>
        var app120 = new Vue({
            el: '#app-120',
            data: { array:[],
                    array2:[]
                  },
            methods: {
                changeArray2(e) {
                    if (e.target.checked) {
                        this.array2.push(e.target.value);
                    } else{
                        this.array2 = this.array2.filter(n => n !== e.target.value);
                    }
                }
            }
        })
    </script>
---