>>> or ::v-deep not working in Vue project - css

Question

I currently want to replace /deep/ for ::v-deep or >>> in my Laravel/Vue project because it is deprecated. But the only thing that keeps working is /deep/ the other options does not seem to work. For example I have this styling in my component:
<style scoped>
.v-data-table
>>>
tbody
>>>
tr:hover:not(.v-data-table__expanded__content) {
background: #ffffff !important;
}
.v-data-table >>> tr {
height: 60px;
}
</style>
It only works when I use /deep/, >>> doesn't to anything. I don't know if it has something to do with my used packages or webpack config. I recently updated all my NPM packages, this is my package.json:
"devDependencies": {
"axios": "^0.19.2",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.26.3",
"sass-loader": "7.*",
"vue": "^2.5.17",
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.12.1",
"secure-ls": "^1.2.6",
"vue-i18n": "^8.15.5",
"vue-router": "^3.1.6",
"vuetify": "^2.2.17",
"vuex": "^3.1.3",
"vuex-persistedstate": "^2.7.1"
}
And my webpack.mix.js config:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.options({
postCss: [
require('autoprefixer'),
],
})
What am I currently missing that I can't use the new deep selectors? Any help is appreciated.
Update:
The full component looks like this:
<template>
<v-data-table
:headers="headers"
:items="items"
:disable-sort="true"
:item-key="itemKey"
:disable-pagination="true"
:hide-default-footer="true"
:search="search"
>
<template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
<slot :name="slot" v-bind="scope" />
</template>
</v-data-table>
</template>
<script>
export default {
name: "BaseDataTable",
props: {
headers: Array,
items: Array,
itemKey: {
type: String,
default: "id"
},
search: {
type: String,
required: false
}
}
};
</script>
<style scoped>
.v-data-table
/deep/
tbody
/deep/
tr:hover:not(.v-data-table__expanded__content) {
background: #ffffff !important;
}
.v-data-table /deep/ tr {
height: 60px;
}
</style>

Answer 1

I meet this problem in the Mpvue Or the Uniapp.
I fixed it finally by adding an option. But I am not sure it's suited for Vue projects. You can try it.
options: { styleIsolation: 'shared' }, // add this
methods: {
yourFunc1 () {
}
}