I have variable using ref() named ‘error’, I can access .value normally =>
image 1

import { ref, reactive } from 'vue'

import { doc, getDoc } from 'firebase/firestore'
import { db } from '../configs/firebase'

export default function () {
  const docCol = reactive({})
  const error = ref(null)

  const fetchDoc = async (collectionName, collectionID) => {
    try {
      const tourCol = doc(db, collectionName, collectionID)

      const docSnap = await getDoc(tourCol)

      if (docSnap.exists()) {
        console.log('==> Document data exists!')
        Object.assign(docCol, { id: docSnap.id, ...docSnap.data() })
      } else {
        error.value = 404
        console.log('No such document!')
      }
    } catch (err) {
      error.value = err
      console.log(err)
    }
  }
  return { docCol, error, fetchDoc }
}

BUT, when I import file in setup() of component, I can’t access .value =>
image 2: setup()

setup() {
    const route = useRoute()
    const router = useRouter()
    const tour = ref({})

    const { docCol, error, fetchDoc } = useDoc()
    fetchDoc('tours', route.params.id)
    tour.value = docCol

    console.log('???? ~ error:', error)
    console.log('???? ~ error.value:', error.value)
    if (error.value === 404) {
      router.push({ name: 'NotFound' })
    }

    return { tour, error }
  }

I use console.log(error) and console.log(error.value), it show RefImpl { … value: 404} and null =>
image 3: console

I try this but it also not working:

const err = ref(error) 
console.log(err.value)