グラフに合わせて位置を変えて文字を表示したい

前提・実現したいこと

グラフのすぐ右横にpropsで受け取った数字を出力する事を実現したいです。

vuetifyでtypescriptのpropsから受け取ったリストの数字をv-modelで横棒グラフと「○○回」という文字に反映させて、v-forでループさせています。
propsで受け取った数字を元にグラフ化する事は出来たのですが、各グラフそれぞれのすぐ右横の位置に数字を表示することができません。
(下図、参照)
＊下記の黒線カッコは、表示したい真横の位置が分かるように追記したものです。

発生している問題

現在は、.childというCSSのクラスを作って指定したポジションに数字(＊下記のソースコードのstrongを参照)を固定しているだけで、
v-forでループされた各横棒グラフのすぐ真横の位置にpropsで受け取った数字を表示させることが出来ません。

該当のソースコード

<template lang="pug">
v-card
    v-col(cols=12,md=12)
      v-card
        v-card-text(v-for="(opt, key) in times")
            v-progress-linear(v-model="times[key]" color='yellow' height='10' background-color="transparent")
            strong.child {{opt}} 回
</template>
<script lang="ts">
import {
  defineComponent,
  PropType,
  ref,
} from "@vue/composition-api";

export default defineComponent({
  props: {
    data: {
      type: Object
    },
  },

  setup(props) {
    const times =ref(props.data.data);

    return {
      times,
    };
  },
});

</script>
<style lang="css" scoped>
.child {
position: relative;    
bottom: 15px;
left:150px
}
</style>

試したこと

・strongに対して、v-bindを利用して:style='"left:"+value;'を当てはめましたが、うまくいきませんでした。
・CSSのfloat: right;で指定してみましたが、v-progress-linearのbackgroundの領域があり、直ぐ右横に出ませんでした。
・v-progress-linearのbackgroundの領域を削除し、すぐ右横に○○回の文字が来るように試しましたが、できなかったので、CSSで
領域を指定する方法で固定しています。

補足情報（FW/ツールのバージョンなど）

・chartjsはpropsのリストが増えて複数の横グラフにするさいに1つのグラフが小さくなるため利用したくありません。
・propsの参照先のリスト(props.data.data)は、右記を受け取っています。→　data: [43, 90, 10, 80, 27, 20],
・CSSでleftの値を横棒グラフの長さ(propsのリストの数字)に従って可変で設定できる方法があれば、ベストです。
(その他でも実現できる方法がございましたら、お待ちしております。)

"version": "2.0.0",
"pug": "^3.0.2",
"@nuxtjs/vuetify": "^1.11.3",
"@nuxt/typescript-build": "^2.1.0",