bootstrap-vueのb-tableを使ってjsonの値をテーブルに表示させたい

Question

質問内容

vue.jsでbootstrap-vueを使ってバックエンドAPIから返されるjsonをテーブル表示させたいです。

jsonはこのように返ってきます。
日付と、ユーザーの各ステータス毎の総数やコメント数などを返します。
（実際のAPIと一部変えています）
日付はすぐ表示できるので問題なさそうですが、users以下の表示の仕方を悩んでいます。
その際、bootstarp-vueの機能で周りに合わせて装飾したいので、b-tableを使いたいですが、
うまく渡すことができないでいます。

{
  "year": 2021,
  "month": 9,
  "day": 1,
  "users": {
    "free": {
      "allAount": 100,
      "commentCount": 50,
    },
    "paid": {
      "allAount": 80,
      "commentCount": 60,
    },
    "trial": {
      "allAount": 30,
      "commentCount": 10,
    }
  }
}

自分で試したこと

tableタグ使ってtrやth、tdでできることは確認してますが、b-tableでシンプルにかくことができればと思っています。お知恵をおかりしたいです。

<table>
  <tr>
    <th scope="col"></th>
    <th scope="col">総数</th>
    <th scope="col">コメント総数</th>
  </tr>
  <tr v-for="(item, index) in users.users" v-bind:key="index">
    <th scope="row">{{index}}</th>
    <td>{{item.allAount}}</td>
    <td>{{item.commentCount}}</td>
  </tr>
</table>

scriptタグ部分（一部簡略化してます）

data() {
  return {
    users: [],
  };
},
methods: {
    getUsers() {
      this.$axios
        .get(url)
        .then(res => {
          this.users = res.data)
        }
    );
},
...

使用バージョン

使用バージョン:

$ node -v
v15.11.0

"axios": "^0.21.1",
"bootstrap-vue": "^2.21.2",
"moment": "^2.29.1",
"vue": "2.6.11",