I have a simple filter operation after delete which for some reason returns an empty array. The values are evaluated correctly, but allSheep ref gets reassigned to an empty array after the operation is done. I am not sure why this is happening. Here is my setup function

  setup() {
    const allSheep = ref([]);
    const formOpen = ref(false);
    const searchQuery = ref("");
    const searchTag = ref("tag_id");
    const axios = inject("axios");
    axios
      .post(GRAPHQL_API_URL, {
        query: print(ALL_SHEEP),
      })
      .then((response) => {
        allSheep.value = response.data.data.get_all_sheep;
      })
      .catch((err) => console.log(err));

    const filteredSheep = computed(function () {
      const query = searchQuery.value.toLowerCase();
      return searchTag.value === "breed"
        ? allSheep.value.filter((el) => el.breed.breed_name.includes(query))
        : allSheep.value.filter((el) =>
            el[searchTag.value].toLowerCase().includes(query)
          );
    });

    function getSearchQuery(query) {
      searchQuery.value = query;
    }

    function setTag(key) {
      searchTag.value = key === "tag" ? (key = "tag_id") : key;
      searchQuery.value = "";
    }

    function handleOpenForm() {
      formOpen.value = true;
    }
    function updateData(data) {
      allSheep.value = [...allSheep.value, data];
    }

    function deleteSheep(id) {
      allSheep.value = allSheep.value.filter((el) => {
        el.sheep_id !== id;
      });
    }

    return {
      allSheep: filteredSheep,
      getSearchQuery,
      setTag,
      handleOpenForm,
      updateData,
      formOpen,
      searchQuery,
      searchTag,
      deleteSheep,
    };
  },
};
</script>