vue3中reactive不能双向绑定，但ref可以

前言：技术大厂，看机会的入，前后端测试可投

……………………………………

在checkbox中使用ref声明的数组可以双向绑定，但是reactive不行，请问是什么问题？

reactive不行

<script setup>
import { reactive, ref} from "vue"
const checkedValues = reactive([]);
</script>
 
<template>
  <input type="checkbox" v-model="checkedValues" id="checkbox_1" value="1"/><label for="checkbox_1">checkbox1</label>
  <input type="checkbox" v-model="checkedValues" id="checkbox_2" value="2"/><label for="checkbox_2">checkbox1</label>
  <input type="checkbox" v-model="checkedValues" id="checkbox_3" value="3"/><label for="checkbox_3">checkbox1</label>
 
  <div style="margin-top:10px">
    checkedValues : {{checkedValues}}
  </div>
</template>

ref可以

<script setup>
import { reactive, ref} from "vue"
const checkedValues = ref([]);
</script>
 
<template>
  <input type="checkbox" v-model="checkedValues" id="checkbox_1" value="1"/><label for="checkbox_1">checkbox1</label>
  <input type="checkbox" v-model="checkedValues" id="checkbox_2" value="2"/><label for="checkbox_2">checkbox1</label>
  <input type="checkbox" v-model="checkedValues" id="checkbox_3" value="3"/><label for="checkbox_3">checkbox1</label>
 
  <div style="margin-top:10px">
    checkedValues : {{checkedValues}}
  </div>
</template>

请问是什么原因