Some of Quasar's styles not loading - vue.js

Question

I have added the Quasar plugin onto an existing Vuejs project.
The problem I am experiencing is that when I use Quasar components, it seems that some of it's styling does not work.
Will provide pics at the bottom of the page.
In my main.js I use Quasar :
projectAuth.onAuthStateChanged(()=>{
if(!app){
app = createApp(App).use(Quasar, quasarUserOptions).use(store).use(router).mount('#app')
}
})
quasarUserOptions:
import './styles/quasar.sass'
import '#quasar/extras/material-icons/material-icons.css'
// To be used on app.use(Quasar, { ... })
export default {
config: {},
plugins: {
}
}
and finally the component in which I wish to use a Quasar component:
<template>
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md">
<q-select
filled
hide-bottom-space
options-dense
hide-dropdown-icon
v-model="model"
use-input
clearable
multiple
input-debounce="500"
:options="filterOptions"
#filter="filterFn"
style="width: 200px"
counter
hint="Selected items"
label="Actors"
dense
hide-selected
></q-select>
</div>
</div>
<template/>
<script >
import {ref} from 'vue'
export default {
setup(){
const stringOptions = ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle']
const filterOptions = ref(stringOptions)
const model = ref(null)
const filterFn = (val, update) => {
update(() => {
if (val === '') {
filterOptions.value = stringOptions
}
else {
const needle = val.toLowerCase()
filterOptions.value = stringOptions.filter(
v => v.toLowerCase().indexOf(needle) > -1
)
}
})
}
return {filterFn, model, filterOptions, stringOptions}
}
}
</script>
<style scoped>
</style>
The following img is what It is supposed to look like and how it displays in codepen :
The following img is what It looks like in my vuejs app :
Both images aren't at the same scale but that is not the problem.
Any advice will be very appreciated