reactive( array ) 선언 후 array에 filter를 사용하면 반응이 안되요

let itemsReactive = reactive([
  { id: 1, name: '딸기1', check: true },
  { id: 2, name: '딸기2', check: true },
  { id: 3, name: '딸기3', check: true },
  { id: 4, name: '딸기4', check: true },
]);

const deleteItemReactive = id => {
  let tempItems = itemsReactive.filter(item => item.id !== id);
  itemsReactive = tempItems;
};

const updateItemReactive = id => {
  let tempItem = itemsReactive.find(item => item.id === id);
  tempItem.check = !tempItem.check;
};

위 코드에서 updateItemReactive 함수는 check값이 true, false 바뀌는 것을 확인할 수 있는데

deleteItemReactive 함수를 사용하면 반응이 안되고 있습니다.

vuejs devtools로 확인해보니까 바뀌기 전에는 ItemsReactive = Reactive이고 배열 안에 요소들은 Object인데

deleteItemReactive 함수를 실행하면

ItemsReactive = Array 이고 배열 안 요소들이 Reactive로 바뀌는 것을 확인했습니다. 왜 이렇게 나오는지 모르겠습니다.

let itemsReactive = ref([
  { id: 1, name: '딸기1', check: true },
  { id: 2, name: '딸기2', check: true },
  { id: 3, name: '딸기3', check: true },
  { id: 4, name: '딸기4', check: true },
]);

const deleteItemReactive = (id) => {
  let tempItems = itemsReactive.value.filter((item) => item.id !== id);
  itemsReactive.value = tempItems;
};

const updateItemReactive = (id) => {
  let tempItem = itemsReactive.value.find((item) => item.id === id);
  tempItem.check = !tempItem.check;
};