Why does the error "Property 'toLowerCase' does not exist on type 'Ref'" occur?

Question

typescript

I ran into such a problem that when rewriting a component in
Vue 3 on the Composition API in the watch -er, an error appeared:

Property 'toLowerCase' does not exist on type 'Ref<string>'

, although logically everything is correct.

seachCityName - const seachCityName = ref("") (plain string)
fullListofCities - an array of ObjectOfCity:

interface ObjectOfCity {
  city: string;
  temperature: number;
}

watch -er itself :

watch(seachCityName, () => {
    store.commit(
      "SET_CITIES",
      store.getters.fullListofCities.filter((city: ObjectOfCity) =>
        city.city.toLowerCase().includes(seachCityName.toLowerCase())
   )
 );
})

Answer 1

seaCityName - regular string

Yah? Judging by the text of the error, this is ref. So your string will be seachCityName.value.