BootstrapVue Table Column Align Right

<b-table hover :items="items">  <template v-slot:head(price)="data">    <div class="text-right">{{ data.label }}</div>  </template>  <template v-slot:cell(price)="data">    <div class="text-right">{{ data.value }}</div>  </template></b-table>

<template>  <div>    <b-table hover :items="items" :fields="fields" />  </div></template><script>export default {  data() {    items: [      {        name: 'USB Cable',        price: 1.25      },      {        name: 'Pencil',        price: 0.5      },    ],    fields: [      { label: 'NAME', key: 'name'},      { label: '$', key: 'price', tdClass: 'text-right', thClass: 'text-right'}    ]  },}  </script>