Всем привет,
В Laravel 5.7 / Vuejs 2.6 / Bootstrap 4.3 приложении использую "vuejs-paginate": "^2.1.0"
и проблема со стилями, что определяя в одном vue-файле paginate component и css-опреления, вроде

		<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>

Если раскоментарить строку выше :

/*li {*/

паджинатор выглядит нормально. Но мне не нравиться этот способ, так как li определение может повлиять на другие li на этой странице

Если определить :

	li.paginate-page-item {

тогда paginaion поломанный - это можно увидеть вживую :
http://hostels-tours.nilov-sergey-demo-apps.tk/

Я добавил класс с желтым в бекграунд для наглядности.

Не пойму почему ошибка с определение li выше ?

Thanks!