Can't show recieved data from API in Vuejs3

Question

I am new with Composition API 3 and trying to call an API and show data in page

My code is like this:

let items: IChannel[] = reactive([]);
async function get() {
  try {
    const res = await channelService.get()
    console.log(res)
    items = res.data;
  } catch (err) {
   console.log(err)
    Swal.fire("error", "error", "error");
  }
}

and it successfully gets data from API but doesn't show in template:

<template>
  {{ items }}
</template>

Where is the problem?

Answer 1

You're overwriting items (a reactive instance) with the raw data, which removes its reactivity:

let items: IChannel[] = reactive([]);
?
items = res.data; ? overwrites `reactive`

Option 1: Use object in reactive

Use a reactive object that receives the raw data:

                           ?
const items = reactive({ items: [] as IChannel[] });
async function get() {
  try {
    const res = await channelService.get()
            ?
    items.items = res.data;
  } catch (err) {
    //...
  }
}

demo 1

Option 2: Use a ref

Use a ref instead of reactive, making sure to set its value property with the newly received raw data:

               ?
const items = ref([] as IChannel[])
async function get() {
  try {
    const res = await channelService.get()
            ?
    items.value = res.data;
  } catch (err) {
    //...
  }
}

demo 2