How to make Skeleton load on vue?

Question

Vue.js

Hello, I spied on the implementation code of the loading skeleton, but here in the example the data is output statically and it is not clear how to apply it to output from the database and, accordingly, make a cycle for output

<template>
  <div class='profile-card'>
    <div class='profile-image'>
      <img class='profile-image__border' src='/img-border.png' />
      <img class='profile-image__img' :src='userData.pic' />
    </div>
    <div class='profile-info'>
      <span> Written By </span>
      <h3> {{ userData.name }} </h3>
      <p> {{ userData.bio }} </p>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'

const loadUserData = async () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        name: 'Matt Maribojoc',
        pic: 'https://learnvue.co/wp-content/uploads/2020/04/img-border.png',
        bio: 'I run a VueJS community over at https://learnvue.co, develop web sites, and post whatever I find cool on the Internet.'
      })
    }, 4000)
  })
}

export default {
  async setup () {
    const userData = ref(await loadUserData())

    return {
      userData
    }
  }
}

</script>

If someone knows, tell me!