Component registration issue - paginated is not defined

[gavinmckay]

Hello,

I'm sorry I'm sure this is a really simple thing I am doing wrong... I get the following warning when I try and use the component:

[Vue warn]: Property or method "paginated" is not defined on the instance but referenced during render.

I have a Vue SFC per below (I have snipped out other script/html that isn't relevant), but I'm stuck on getting this available in the Vue itself. I haven't put anything registered globally, is that what I'm doing wrong? Is it possible to get vue-paginate to work on just a SFC? I have tried various combinations including global registration, component registration etc but no luck so far. Can anyone point me in the right direction?

<template>
        <div>
            <paginate name="languages"
                      :list="langs"
                      :per="2">
                <li v-for="lang in paginated('languages')">
                    {{ lang }}
                </li>
            </paginate>
        </div>
</template>

<script>
    import VuePaginate from 'vue-paginate';

export default {
        components: {
            Paginated
        },
 data() {
            return {
                langs: ['JavaScript', 'PHP', 'HTML', 'CSS', 'Ruby', 'Python', 'Erlang'],
                paginate: ['languages']
            }
        }
</script>

[gavinmckay]

Sorry for close/re-open, I had a format-code fail...

[gavinmckay]

Resolved. I had the Vue object registered globally, but in order to add the VuePaginate component I had to include it like this.

// Missing this line \/\/
    import Vue from 'vue';
    import VuePaginate from 'vue-paginate';

// This line now works
    Vue.use(VuePaginate);

I could have registered this globally, but a lot of the pages in my App don't display any Vue data so I can be a bit selective about where they get used.