Unable to pass a property, Invalid expression?

Hello,

I'm trying to pass a property (apiToken) to my Bundle component like so:

<bundle
    :show.sync="bundleModal" 
    :id="{!! $product->id !!}" 
    :api-token="{!! auth()->user()->api_token !!}"></bundle>

And my component looks like this:

props: {
    show: {
        type: Boolean,
        required: true,
        twoWay: true    
    },
    id: {
        type: Number,
        required: true
    },
    apiToken: {
        type: String,
        required: true
    }
},

data: function() {
    return {
        product: null,
        user: null
    }
},

ready: function() {
    this.getProduct(this.id);
    this.getUser(this.apiToken);
},

methods: {

    getProduct: function(id) {
        // requests product
    },

    getUser: function(token) {
        // requests user
    }

}

For some reason, I can pass everything but my API token to this component? In the console I get the following errors.

[Vue warn]: Invalid expression. Generated function body:  8RH6BHpbJDCVJlHTuepGZBVl72NqH3WufU7g2T0pZUlyBIcHsolyTA4qB03y
[Vue warn]: Error when evaluating expression "8RH6BHpbJDCVJlHTuepGZBVl72NqH3WufU7g2T0pZUlyBIcHsolyTA4qB03y": TypeError: Cannot read property 'call' of undefined
[Vue warn]: Invalid prop: type check failed for prop "apiToken". Expected String, got Undefined. (found in component: <bundle>)

Why is it not getting the token properly? It's attempting to by the looks of it but says it's it's an Invalid expression?