Как использовать область bootstrap4 css в vue

У меня есть приложение, которое в настоящее время основано на bootstrap 3, мне нужно использовать некоторые Bootstrap 4 в компоненте vue.

Моя проблема заключается в том, что если я использую:

   <style lang="scss">
       @import '~bootstrap/scss/bootstrap';
   </style>

Затем весь макет моего приложения запутывается, поскольку он использует bootstrap4 css везде, а не только в моем компоненте. Если я использую

   <style scoped lang="scss">
       @import '~bootstrap/scss/bootstrap';
   </style>

Старый bootstrap3 применяется везде.

Это код компонента vue, который я пытался запустить

<template>
    <div class="main">
        <b-table striped hover :items="items"></b-table>
    </div>
</template>

<script>
    import BP_table from "../BusinessPlan/BP_table"
    export default {
        components:{
            'bp-table':   BP_table,
        },
        data() {
            return {
                items: [
                    {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
                    {age: 21, first_name: 'Larsen', last_name: 'Shaw'},
                    {age: 89, first_name: 'Geneva', last_name: 'Wilson'},
                    {age: 38, first_name: 'Jami', last_name: 'Carney'}
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~bootstrap/scss/bootstrap';
</style>