why does my app not display the api response properly

Question

so my api is returning the correct info from my sqlite db ( i think)

this is the response i get when i just do {{ vendor }} [ { "id": 1, "vendor_name": "pip" }, { "id": 3, "vendor_name": "test1" } ]

but when i add the ".vendor_name" to the v-for in my template it disappears

is the api response in the wrong format or am i assigning it to the "ref" wrong?

im new to vue and im trying to figure out why this is happening any help is greatly appreciated

<script >
import axios from 'axios'
import { ref } from 'vue'

export default {
    setup () {
        const vendors = ref()

        const loadvendors = async () => {
        const response = await axios.get('http://localhost:1337/vendors')
        vendors.value = response.data
        }

        loadvendors()
       
        return {
            vendors
        }
    }
}


</script>

<template>
    
        <h1>Vendors</h1>
        
        <li v-for="vendor in vendors">{{ vendor.vendor_name }}</li>


</template>

Answer 1

I think. You should load data from api onMounted() and you should set any value in ref([]) or ref(null);

Answer 2

got it, all i had to do was use

<li v-for="vendor in vendors.vendors":key="vendors.id">{{ vendor.vendor_name }}</li>

instead of

<li v-for="vendor in vendors":key="vendors.id">{{ vendor.vendor_name }}</li>