Pass a variable from Blade to Vue component

I’m trying to pass over an item’s hashID from a Blade template to a Vue component. I’ve been searching high and low to get this to work but I keep getting the following error:

[Vue warn]: Property or method "EpXzJVPbOD9" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

"EpXzJVPbOD9" is the hashID is question. i’m trying to pass it in my Blade template by doing this:

<subscribe :hashid="{{ $list->hashid }}"></subscribe>

This is my Vue component:

<template>
    <button 
        class="btn" 
        v-bind:class="buttonClass"
        v-bind:disabled="disabledState"
        v-bind:title="title"
        aria-label="Left Align"
        @click="changeSubscriptionState(getListId())"
    >
            <i 
                class="glyphicon" 
                v-bind:class="iconClass"
                aria-hidden="true"
            ></i> {{ text }} 
    </button>
</template>

<script>
    export default {
        data: function () {
            return {
                buttonClass: 'btn-primary',
                text: 'Subscribe',
                disabledState: false,
                title: 'Subscribe to this list',
                iconClass: 'glyphicon-paperclip',
                hashid: ''
            }
        }
        created() {
            console.log('Component ready.');
            this.fetchSubscriptionStatus(this.hashid);
        },
        methods: {
            fetchSubscriptionStatus: function(list) {

                $.getJSON('api/'+list+'/subscription-status', function(status) {
                    console.log(status);
                    this.setButton(status);
                }.bind(this));

            },
            changeSubscriptionState: function(list) {
                $.getJSON('api/'+list+'/change-subscription-status', function(status) {
                    console.log(status);
                    this.setButton(status);
                }.bind(this));
            },
            setButton: function(status) {
                switch(status) {
                    case 1:
                        this.buttonClass = 'btn-danger';
                        this.text = 'Subscription denied';
                        this.disabledState = true;
                        this.title= 'Blocked';
                        this.iconClass = 'glyphicon-ban-circle';
                        break;
                    case 2:
                        this.buttonClass = 'btn-info';
                        this.text = 'Subscription pending';
                        this.disabledState = false;
                        this.title= 'Unsubscribe';
                        this.iconClass = 'glyphicon-alert';
                        break;
                    case 3:
                        this.buttonClass = 'btn-success';
                        this.text = 'Subscribed';
                        this.disabledState = false;
                        this.title= 'Unsubscribe';
                        this.iconClass = 'glyphicon-ok';
                        break;
                    default:
                        this.buttonClass = 'btn-primary';
                        this.text = 'Subscribe';
                        this.disabledState= false;
                        this.title= 'Subscribe to this list';
                        this.iconClass = 'glyphicon-paperclip';
                }
            }
        }
    }
</script>

And this is in my app.js file

Vue.component('subscribe', require('./components/Subscribe.vue'));
const app = new Vue({
    el: '#app'
});

Thanks