DOM does not show updated data of array in vue.js & laravel while axios call

after several attempts to find a solution here I decided to post it.

I am a beginner and using laravel + vue.js + mysql

Approach

I fetch data via an Axios call and update the data within the vue instance. Then I would like to show this data and update the DOM. I use mounted() to get the data and update the array "users".

Problem

I am able to get the data, update the array (when console logging), however I am not able to show it in the DOM. It wont update. What am I missing?

My vue component:

<template>
  <div class="container">
    <form class="form" v-on:submit.prevent="submituser">
      <div class="row">
        <label id="username">Username</label>
        <input type="text" v-model="username" name="username" />
      </div>
      <div class="row">
        <label id="password">Password</label>
        <input type="password" name="password" v-model="password" v-on:keyup="CheckPrint" />
      </div>
      <div class="row">
        <button type="submit" class="mt-2 btn btn-primary">Sign up</button>
      </div>
    </form>
    <h2>All Users</h2>
    <p></p>
    <ul>
      <li v-for="user in users" :key="user.name"></li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data: function() {
    return {
      password: "",
      username: "",
      users: []
    };
  },

  mounted() {
    var vm = this;
    axios.get("api/user").then(function(response) {
      vm.users = response.data;
      console.log(vm.users, "User updated");
    });
  }
};
</script>

My app.js component:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require("./bootstrap");

window.Vue = require("vue");

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
import Vue from "vue";
import Vuex from "vuex";
import store from "../store/store";

Vue.use(Vuex);

Vue.component("Signup", require("./components/User/Signup.vue"));

const app = new Vue({
  el: "#app",
  store
});

Thanks a lot for your help. I am sure its an easy one for most of you!

via Chebli Mohamed