Nuxt Js global CSS vs Local CSS issue

I am currently developing a nuxt application using an admin template. I am familiar with vue js but the loading assets within nuxtjs part is a little bit confusing for me. I am converting the admin template pages to nuxt page components. I will talk about the email page (one of many pages with the same issue) in this question.

The base admin page has various CSS files loaded on the page. Some are global level some are page level. I have added the global CSS in the nuxt.config.js file

   /*
   ** Global CSS in nuxt.config.js
   */
  css: [
    // long list of global css files
  ],

And I tried loading the page level CSS like this.

  // pages/email.vue
export default {
  head: {
    bodyAttrs: {
      class:
        'vertical-layout vertical-menu-modern content-left-sidebar email-application navbar-sticky footer-static',
      'data-open': 'click',
      'data-menu': 'vertical-menu-modern',
      'data-col': 'content-left-sidebar'
    },
    script: [
      { src: '/app-assets/js/scripts/pages/app-email.js' },
      { src: '/app-assets/vendors/js/editors/quill/quill.min.js' }
    ]
  },
  css: ['~/static/app-assets/css/pages/app-email.css'], // this way doesnt work
  middleware: 'auth'
}

When I add the page level CSS like this it doesn't work at all. The styles are not loading. But, as expected, when I add the same style sheet in the global styles in nuxt.config.js, IT WORKS!!

   /*
   ** Global CSS in nuxt.config.js
   */
  css: [
    // long list of global css files
    '~/static/app-assets/vendors/css/editors/quill/quill.snow.css', //works like charm
  ],

Any idea what I am missing here? Cheers.