How do I use the `route` function in a compiled Vue component?

I’m using the following code:

                <div class="list-group" v-if="projects.length > 0">
                    <a v-for="project in projects" :href="route('api.project', {project_id: project.id})" class="list-group-item">{{ project.name }}</a>
                </div>

But I get the following error in console:

Note that both route and namedRoutes exist. I have @route above the app.js line in my layout.

[Archer70]

I know this issue is old, but I came across it by Googling the same problem and thought I might add my solution as well. I was able to add route as a global function to all my compiled Vue components by adding this to app.js

Vue.mixin({
    methods: {
        route: route
    }
});

And then you can call it like so:

<a class="nav-link" :href="route('home')">{{ $t('Home') }}</a>

[simensen]

@stevebauman Great, thanks. I decided to use a function instead as that appears to work OK:

                <div class="list-group" v-if="projects.length > 0">
                    <a v-for="project in projects" :href="projectUrl(project)" class="list-group-item">{{ project.name }}</a>
                </div>

…

<script>
    export default {
        methods: {
            projectUrl(project) {
                return route('api.project', {project_id: project.id})
            },
...

Indeed, it would be nice to be able to use this the other way, though. I can keep this issue open as a feature request or I can close it. I’m happy that I have a solution now.