Vue CLI component style tag NOT scoped not applied in Rails CSP error

I have a Rails app with Vue. When I try to add something in the <style> tag, it does not get applied. It is also not visible in the rendered HTML. I do not have the css-loader in my dependencies and when I install it, the entire application does not work.

My index.html.erb

<%= stylesheet_pack_tag 'hello_vue' %>
<%= javascript_pack_tag 'hello_vue' %>

My hello_vue.js

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

My app.vue

<template>
  <div id="app">
  </div>
</template>

<script>

export default {
}

</script>

<style>
#app{
  background: aqua;
}
</style>

My package.json with the css-loader (which does not work)

{
  "name": "name-of-project",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "css-loader": "^6.3.0",
    "leaflet": "^1.7.1",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "vue2-leaflet": "^2.7.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@vue-leaflet/vue-leaflet": "^0.6.1",
    "webpack-dev-server": "^3"
  }
}

(I removed my actual code, but it didn't work at the beginning either)

When I edit the style with inspect in the browser, it works. Also when I add the style inline it works, for example:

I installed vue with the rails install:webpacker:vue command. When I only created a vue project, it worked just fine, however, this time with vue it seems to not be working and I don't know why.

Edit: It has to do with the fact that the style-tag gets blocked from loading, because of CSP. According to Vue, this should not happen, but it does and there is no answer to it on the web.