I was trying to implement CSP i.e style-src 'self' in Vue2 but facing a issue of unsafe inline

I was trying to create a page using Vue2 and laravel with CSP compliant but facing an error on unsafe inline

my vue component is

and my webpack is

const mix = require('laravel-mix');

mix.webpackConfig({ resolve: { extensions: ['.js', '.jsx', '.vue'], }, module: { rules: [ { test: /.vue$/, // Apply this rule to .vue files loader: 'vue-loader', // Use vue-loader for Vue.js compilation options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': [ 'vue-style-loader', 'css-loader', 'sass-loader' ], 'sass': [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax' ] }, } }, { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ], }, { test: /.sass$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax' ], }, { test: /.(js|jsx)$/, // Apply this rule to .js files exclude: /node_modules/, // Don't apply babel to node_modules use: { loader: 'babel-loader', // Use babel-loader for transpilation options: { presets: ['@babel/preset-env'] // Use @babel/preset-env for modern JavaScript transpilation } } } ], }, });

mix.js('resources/js/app.js', 'public/js').vue();