Error with style definitions for vuejs-paginate

Hello, Working with Laravel 5.7 / Vuejs 2.6 / Bootstrap 4.3 app I use "vuejs-paginate": "^2.1.0" and I have styles problems, that defining in the same vue file paginate component ans css definitions, like

        <div class="row p-0 pl-3 pr-3 m-0">
            <paginate
                    :page-count="getPagesCount"
                    :click-handler="paginationPageClicked"
                    :prev-text="'Prev'"
                    :next-text="'Next'"
                    :container-class="'className'"

                    :pageRange="3"
                    :marginPages="2"
                    :page-class="'paginate-page-item'"

                    :active-class="'paginate-active'"
                    :first-last-button="true"
                    :margin-pages="5"

            >
            </paginate>
        </div>

<style lang="css" >
    ul.className {
        list-style-type: none;
        padding: 0;
        max-height: 30px !important;
    }

    /*li {*/
    li.paginate-page-item {
        display: inline-block !important;
        margin: 0 10px !important;
        background: yellow !important;
    }

    .paginate-active {
        font-weight: bold !important;
        color: grey;
        background-color: lightgrey;
        padding: 2px 5px 2px 5px;
    }


</style>

If to uncomment line :

/*li {*/

above, my pagination looks good. But I do not like this way, as li style definition influence other pages

If to define :

    li.paginate-page-item {

then paginaion conponent is broken, you can look to it live: http://hostels-tours.nilov-sergey-demo-apps.tk/

I added yellow class to the background of the component to see definitions are applied.

Why error and how to fix it ?

Thanks!