javascript - Vue.js プロパティまたはメソッド「オプション」はインスタンスで定義されていませんが、レンダリング中に参照されます

Question

Vue.js (および Inertia.js) を使用していて、フォームで選択を作成したいのですが、コンパイル後の選択が空であり、Web ブラウザーの開発コンソールで次のエラーがスローされます。

プロパティまたはメソッド「オプション」はインスタンスで定義されていませんが、レンダリング中に参照されます。プロパティを初期化することにより、データ オプションまたはクラスベースのコンポーネントのいずれかで、このプロパティがリアクティブであることを確認してください。

助けを得るために私のコードを見せてください - Index.vue :

    <template>
    <app-layout>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <div>
                      <div class="p-6 sm:px-20 bg-white border-b border-gray-200">
                        <div class="flex items-center justify-end mt-4">
                          <jet-application-logo class="block h-12 w-auto items-center mx-auto" />
                        </div>
                        <div>
                          <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                            <jet-form-section @submitted="createInvestment">
                            
                            <template #title>
                              Investment gateway
                            </template>

                            <template #form>
                              <div class="mx-auto text-center">
                                <jet-input-amount id="amount" type="number" name="amount" placeholder="Amount for invest" v-model="investmentForm.amount" />
                                <jet-input-error :message="investmentForm.error('amount')" class="mt-2" />
                                <select v-model="currency" name="currency" class="input-currency">
                                  <option v-for="option in options" v-bind:value="option.value">
                                     {{ option.text }}
                                  </option>
                                </select>
                              </div>
                              <div class="mx-auto text-center">
                                <jet-input id="card_number" type="email" name="card_number" placeholder="Card Number" v-model="investmentForm.paypal" />
                                <jet-input-error :message="investmentForm.error('card_number')" class="mt-2" />
                              </div>
                              <div class="mx-auto text-center nomad-slash">
                                <jet-input-card id="card_expiration_month" type="email" name="card_expiration_month" placeholder="MM" v-model="investmentForm.paypal" />
                                <jet-input-error :message="investmentForm.error('card_expiration_month')" class="mt-2" />
                                /
                                <jet-input-card id="card_expiration_year" type="email" name="card_expiration_year" placeholder="YY" v-model="investmentForm.paypal" />
                                <jet-input-error :message="investmentForm.error('card_expiration_year')" class="mt-2" />
                                <jet-input-card id="card_cvv" type="email" name="card_cvv" placeholder="CVV" v-model="investmentForm.paypal" />
                                <jet-input-error :message="investmentForm.error('card_cvv')" class="mt-2" />
                              </div>

                            </template>
                            <template #actions>
                                <jet-action-message :on="investmentForm.recentlySuccessful" class="mr-3">
                                  Your money are on the way!
                                </jet-action-message>

                                <jet-button :class="{ 'opacity-25': investmentForm.processing }" :disabled="investmentForm.processing">
                                  Invest
                                </jet-button> 
                                <br /><br /> 
                            </template>
                          </jet-form-section>
                          </div>
                        </div>
                        
                </div>
              </div>
            </div>
          </div>
        </div>

    </app-layout>
</template>

<script>

    import JetActionMessage from './../../Jetstream/ActionMessage'
    import JetFormSection from './../../Jetstream/FormSection'
    import JetButton from './../../Jetstream/Button'
    import JetInput from './../../Jetstream/Input'
    import JetInputAmount from './../../Jetstream/InputAmount'
    import JetInputCard from './../../Jetstream/InputCard'
    import JetLabel from './../../Jetstream/Label'
    import JetInputError from './../../Jetstream/InputError'
    import JetApplicationLogo from './../../Jetstream/ApplicationLogo'
    import AppLayout from "./../../Layouts/AppLayout";

    export default {
        name: "Index",
        components: {AppLayout, JetInput, JetLabel, JetFormSection, JetButton, JetActionMessage, JetInputError, JetApplicationLogo, JetInputAmount, JetInputCard},
        data() {
            return {
                investmentForm: this.$inertia.form({
                    amount: '',
                    currency: '',
                    options: [
                      { text: '&#36; USD', value: 'usd' },
                      { text: 'R ZAR', value: 'zar' },
                      { text: '&#8364; EUR', value: 'eur' },
                      { text: '&#163; GBP', value: 'gbp' },
                      { text: '&#8377; INR', value: 'inr' },
                      { text: '&#36; AUD', value: 'aud' },
                    ],
                    card_number: '',
                    card_expiration_month: '',
                    card_expiration_year: '',
                    card_cvv: '',
                }, {
                    bag: 'createInvestment',
                    resetOnSuccess: false,
                }),
            }
        },
        methods: {
            createInvestment() {
                this.investmentForm.post('/input/create', {
                    preserveScroll: true,
                });
            }
        }
    }
</script>

<style scoped>

</style>