Display data in table using v-for laravel vuejs

Question

I'm having a trouble why the data did not display in my table, I've been using v-for in tr to display the data info, but it did not work, Is there any wrong with my code? please check this out.It would be great if anybody could help me out, thank you so much in advance!.

But it seems it returns the data

table

 <tbody>
     <tr v-for="listuser in users" :key="listuser.id" :value="listuser.id" >
         <td class="pl-0">
              <a href="#" >{{listuser.username}}</a>
                  <span class="text-muted font-weight-bold text-muted d-block">Programmer II</span>
          </td>
     </tr>
  </tbody>

My Script

<script>
export default {
    data() {
        return {
            users: [],
        }
    },  
    created() {
        this.getUsers();
    },
    mounted() {
        // this.ini();
    },
    methods: {
        // ini() 
        getUsers() {
            axios.get(BASE_URL + "/users/listUsers").then(response => {
                this.users = response.users;
            });
        }
    },
}
</script>

My Controller

use App\Models\User;
public function index()
    {
        return response()->json(User::all());
    }

model

class User extends Authenticatable {
   use HasApiTokens, Notifiable, HasRoles, WithPaginate;
   use ExtendedEloquentTrait;
   protected $guard = 'users';

   protected $fillable = [     
      'username',
      'email',
      'password'
   ];
  }

Answer 1

First of all use the function call inside mount function. Secondly try the loop with the following syntax.

<tr v-for="(item,index) in users" :key="index">
          <td class="pl-0">
          <a href="#" >{{item.username}}</a>
              <span class="text-muted font-weight-bold text-muted  d-block">Programmer II</span>
           </td>
</tr>

And when you get the api response set the users like below.

this.users = response.data.users