myRef.value is holding a Proxy even tho it should hold a simple array

Question

I am doing a simple app that fetches data (my tasks) from my PocketBase(BaaS like Firebase).

I want to store my tasks into a ref because it could change overtime (ex: user modify the name of it).

I am supposed to get a simple array from my *getFullList() method, *but after that VueJS somehow wrap my value around a Proxy and I can not use the data inside.

I have tried storing my results in a non-ref variable and it worked, I simply had an array of my tasks into it.

But when using ref and the .value this Proxy comes around and I don't know why (its does not do this for my other ref like loading for eg.)

It probably is a stupid begginer mistake but i have read the doc again and again and cant seem to wrap my head around this :(

Here is the code of my MyTasks.vue and the console print statements

<script setup>
import { ref } from 'vue'
import { pb } from '../usePb'

const loading = ref(false)
const error = ref(null)
const myTasks = ref(null)

const fetchData = async () => {
  loading.value = true

  try {
    myTasks.value = await pb.collection('tasks').getFullList()
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
    console.log(myTasks.value)
    console.log(loading.value)
  }
}

fetchData()
</script>

• I was excepting myTasks.value to hold an array instead of a proxy

• I tried having my variable not ref, it worked but it is not what I want

• Works fine with my other ref variables

Answer 1

My bad my original post wasnt complete, my problem was that there were no tasks shown but it was because I used myTasks.value insteand of myTasks. And that it was i assumed my problem came from this proxy (which i read on an other post that the proxy want meant to be read). Thank you Estus FLask for your answers :)