vue.js - Vue - 特定の値をより高いコンポーネントに渡すことができません

Question

次のメッセージが表示されます - プロパティ 'free' of undefined を読み取れません。

このボタン コンポーネントを複数のページに追加します。ページに表示するページに基づいてテキストを追加できるデータ オブジェクトがあります。たとえば、私が使用したいホームページにあり、使用<buttons :text="buttonText.free" />したい私たちについてのページにある場合<buttons :text="buttonText.spend" />

テンプレートファイル

<template>
  <main class="container">
    <buttons :text="buttonText.free" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
  components: {
    Buttons
  }
}
</script>

コンポーネントファイル

<template>
  <div>
    <button class="button"">
      <span>{{ buttonText }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  },
  data () {
    return {
      buttonText: {
        free: 'free',
        spend: 'spend',
        now: 'now',
        nowFree: 'now free'
      }
    }
  }
}
</script>

私が間違っていることを教えていただけますか？