I am facing a strange problem in which the style in my vue component is not being compiled and applied along with the template and script.

I've included my code below. The intention is to animate a slide fade on the hidden text when I click the button. The actual result is the text becomes visible but the css is not applied to it.

---

app.vue

```
<template>
  <div>
    <button @click="show = !show">
      Click Me
    </button>
    <transition name="slide-fade">
      <p class="test-style" v-if="show">This is a hidden message.</p>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
      };
    },
  };
</script>

<style scoped>
  .test-style {
    color: red;
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>

```

---

app.js

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

new Vue({
  el: '#app',
  render: h => h(App),
});

```

Edit - Aug 10th, 2020
---------------------

This is my package.json

```
{
  "name": "www",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "css-loader": "^4.2.1",
    "nodemon-webpack-plugin": "^4.3.2",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

```