Vue3 problems creating tables vuejs-smart-table

I’m new to vue and i’m starting a project where i want to use a library https://github.com/tochoromero/vuejs-smart-table.

At the moment i have a simple app:

<template>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <v-table :data="users">
      <thead slot="head">
          <th>Name</th>
          <th>Age</th>
      </thead>
      <tbody slot="body" slot-scope="{displayData}">
          <tr v-for="row in displayData" :key="row.id">
            <td>{{ row.id }}</td>
            <td>{{ row.title }}</td>
          </tr>
      </tbody>
    </v-table>
  </template>

<script>
import users from './data/karaoke.json'

export default {
    name: 'users',
    data: () => ({
        users
    })
}
</script>

That should read the rows from my karaoke.json and display them as a table right? At least following the documentation here The Basics | VueJs Smart Table.

What happens is that nothing is displayed on the page, is just the vue logo and the DOM for the vtable is empty. On the other side if i use vue chrome dev tools and inspect the page i can see that the vtable actually does have data in it, is just not being displayed.

Is there something I’m doing wrong here? The code is live in this repo https://github.com/jiwidi/lens_database