Question: I am trying to pass a function that returns true or false as a prop, a function similar to this

```
canBeUsed(): boolean {
      if (this.usable) {
        return true
      } 
     return false
     }

```

The component that I am passing the props to has the following code

```
props: {
canBeUsed: {
type: Boolean
}
}

```

But I get the warning `Invalid prop: type check failed for prop "canBeUsed". Expected Boolean, got Function`

The error is because I am passing a function that returns true or false, however the code works as it should. It is still getting the boolean value, I just need to fix this warning, any help is greatly appreciated, thank you!

Answer: 
I'm guessing that you are doing:

```html
<component :can-be-used="canBeUsed"></component>

```

This, indeed passes the function as a prop. However, your prop qualify for a boolean one, and you should pass the result of that function instead:

```html
<component :can-be-used="canBeUsed()"></component>

```

This approach can cause some performance issues if the function is complex (it will get called on every template rerendering). In this case, the best approach is to use a computed prop.

```html
<component :can-be-used="canBeUsed"></component>

```

```js
computed: {
  canBeUsed(){
     if (this.usable) {
        return true
     } 
     return false
  }
}

```

This will reevaluate prop value only when needed.
Why don't you just pass `this.usable` to the component props?

`<component :can-be-used="usable"></component>`

If all your component cares about is whether or not usable is true or false, that should be it. The data processing can happen on the parent to determine `this.usable`'s value.