未在实例上定义“预订”的属性或方法，而是在render.in Vue，js中引用了该属性或方法

Question

在我的vue订阅按钮组件中，我提到了计算道具和方法的每个部分。在计算中，我提到了订阅的属性： 但是仍然给我一个错误：-

“ [Vue警告]：未在实例上定义“订阅”的属性或方法，但在渲染过程中引用了该属性或方法。请通过初始化data选项或基于类的组件，确保此属性是反应性的属性。请参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。“

Subscribe-buttom.js

Vue.component('subscribe-button', {
    props: {
        profile: {
            type: Object,
            required: true,
            default: () => ({})
        },
        subscriptions: {
            type: Array,
            required: true,
            default: () => []
        }
    },
    computed: {
        subscribed: function() {
            if (!__auth() || this.profile.user_id == __auth().id) return false
            return !!this.subscriptions.find(subscription => subscription.user_id == __auth().id)
        }
    },
    methods: {

        toggleSubscription() {
            if (!__auth()) {
                alert('Please login to Subscribe')
            }
        }
    }

})

这是我的show.blade.php的一部分。

<div class="text-center">
    <subscribe-button :profile="{{ $profile }}" :subscriptions="{{ $profile->subscriptions }}" inline-template>
     <button @click='toggleSubscription' class="btn btn-danger">
      @{{ subscribed ? 'Unsubscribe' : 'Subscribe' }} 7k
     </button>
    </subscribe-button>
  </div>