Vue3 - value of wrong store ref is being changed?

Question

Here's the store:

import { ref } from "vue";

// Store for all data
export const countriesData = ref();
export const isLoading = ref(true);

async function getData() {
    try {
        isLoading.value = true;
        const response = await fetch("https://restcountries.com/v3.1/all");
        const data = await response.json();
        countriesData.value = data;
    } catch (error) {
        console.error("error", error);
    } finally {
        isLoading.value = false;
    }
}

getData();

// Store for filtered data
export const filteredData = ref(countriesData);

The countriesData should be updated once, with the async getData() and then never changed. filteredData does change, based on searching and filtering elsewhere in the app.

Here's the search input code:

<script setup>
import { ref } from "vue";
import { countriesData, filteredData } from "../../store/store";

const searchValue = ref("");

function handleSubmit(e) {
    e.preventDefault();
console.log(countriesData.value.length);

    for (let i = 0; i < countriesData.value.length; i++) {
        console.log(countriesData.value.length);
        if (
            countriesData.value[i].name.common.toLowerCase() ===
            searchValue.value.toLowerCase().trim()
        ) {
            filteredData.value = [countriesData.value[i]];
            // setError(false);
            searchValue.value = "";
            return;
        } else {
            // setError(true);
        }
    }
}
</script>

For whatever reason, after running this for loop (which works, I get the correct country I search for), the original store, countriesData, changes to only give me countriesData.value[i].

filteredData should be countriesData.value[i], I have no idea why countriesData is also changing to countriesData.value[i].

The code

filteredData.value = [countriesData.value[i]];

in the loop seems to cause both filteredData and countriesData to change to countriesData.value[i], so if I comment that line out, the original countriesData store remains untouched.

How do I get only filteredData to change and leave countriesData untouched?

Answer 1

When setting filteredData as a reference of countriesData, you are pointing towards the same value, so if you edit fileredData, you are unknowingly editing countriesData. In order to avoid this, if you want to store countriesData into filteredData, you need to generate a copy of countriesData.

const filteredData = ref([...countriesData.value])