how to not override the css file inside the blade php file

On my app.js on laravel I imported a library bootstrap-vuejs and it's using Bootstrap 4

app.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css' //Bootstrap 4.3.1
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

const app = new Vue({
    el: '#app',
});

and then on my blade php file i just called it

<script src="" defer></script>

my blade php file however has a Bootstrap version 3.3.7 because I'm using a laravel admin template admin-lte

The issue is when I refresh the page the font / icons becomes bigger on page load.

but after the loading of the page eventually it will become like this

When I comment the bootstrap css on my app.js

//import 'bootstrap/dist/css/bootstrap.css' (Bootstrap 4.3.1)

the problem is solved however i can't use the bootstrap css inside my vue component

Any idea how to fix this? because i think the bootstrap inside my app.js is overriding the boostrap 3.3.7 inside my blade php file.

via Chebli Mohamed