Random User Profile Loading Script in vue

HTML

<div id="app">
   <el-row :gutter="20" v-if="users.length > 0" >
    <el-col :span="8" v-for="(user, index) in users" :key="user.id">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="user.picture.large" class="image">
        <div style="padding: 14px;">
          <span>{{user.name.title}}. {{user.name.first}} {{user.name.last}}</span>
          <div class="bottom clearfix">
            <time class="time">{{ user.email }}</time>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  
  <el-row v-else :gutter="20" class="wrapper">
        <el-col :span="8" v-for="(o, index) in 3" :key="o">
      <el-card :body-style="{ padding: '0px' }" class="wrapper-cell">
        <div class="no-image"></div>
        <div>
          <div class="text bottom clearfix">
            <div class="text-line"></div>
            <div class="text-line"></div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  
</div>

CSS

@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");
.el-card {
  margin-bottom: 1rem;
}

.el-card {
  margin-bottom: 1rem;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* loading like facebook */
.wrapper {
  background: #fff;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background, .text-line, .no-image {
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #F6F6F6;
  background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative;
}

.no-image {
  width: 100%;
}

.text-line {
  height: 10px;
  width: 230px;
  margin: 4px 0;
}

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/index.js"></script>

Javascript

new Vue({
  el: '#app',
  
  data() {
    return {
      users: []
    }
  },
  
  methods: {
    async fetchUsers() {
      const res = await fetch('https://randomuser.me/api/?results=10')
      const data = await res.json()
      this.users = data.results;
       }
  },
  
  mounted() {
    this.fetchUsers()
  }
})

{{user.name.title}}. {{user.name.first}} {{user.name.last}}

{{ user.email }}