[Vuejs]-Using v-for for rendering

since you’re destructing the response inside the callback parameters .then(({ data }) you should directly render categories without .data field :

<tr v-for="category in categories" :key="category.id">

as you sending the data from laravel using api resource the actual data is loaded inside a data property. so you should extract it like this in the axios call

loadCategory(){
                axios.get("api/category").then(({ data }) => (this.categories = data.categories.data));
                
            },
    

yes i just quickly want to clearify , just incase someones sees this issue both answers from @Boussadjra Brahim and @sazzad was helpfull . so what i did was

first i took @Boussadjra Brahim suggestion and changed this

 <tr v-for="category in categories" :key="category.id">
                        <td>{{ category.id }}</td>
                        <td>{{ category.name }}</td>
                        <td>11-7-2014</td>
                        <td><span class="tag tag-success">Approved</span></td>
 </tr>

then i still got errors until i tried @sazzad suggestion but took out the .data attribute giving me this

 loadCategory(){
                axios.get("api/category").then(({ data }) => (this.categories = data.categories));
                
            },

hope this helps someone also thanks again