Property 'forEach' does not exist on type 'Readonly<Ref<Readonly<any>>>'

Question

This is a problem while working with state management in vue3 (pinia) aonf with composition api in vue 3 , after having a successfull query result (array) from countryCodes i want to copy all of the items of countryCodes array to the countries array defined in state , but while using forEach methods along with several other methods for cloning an array i am facing the error " Property 'forEach' does not exist on type 'Readonly<Ref<Readonly>>' " NB: i am using type script , How to solve this issue?

export const getAllCityAndCountries = defineStore("main", {
  state: () => {
    return {
      countries: [
        {
          code: '880',
          name: 'Bangladesh',
          emoji: '🇧🇩'
        }
      ]
    }
  },
  actions: {
    getCountries() {
      const { result, error } = useQuery(gql`${getCountryCodes}`,
        {
          limit: 250,
          skip: 0
        }

      )
      let countryCodes = useResult(result, null, data => data.getCountryCodes.result.countryCodes)

      countryCodes.forEach(val => this.countries.push(Object.assign({}, val)));
    },

  }

})

Answer 1

useResult returns a ref. You can access its value with countryCodes.value