Why do I get an SSR encoding error in Nuxt JS when trying to add a custom class to the body element?

I'm facing an SSR encoding error in a Nuxt project, essentially what I'm trying to achieve is adding a custom class to the body element for a specific page.

Here's the implemented chunk of code:

export default {
   components: {
      PortfolioHeader,
      Footer
   },
   head: {
      bodyAttrs: {
         class: 'portfolio'
      },
      script: [
         {
            src: 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'
         }
      ]
   },
   data() {
        return {
         apiURL: this.$config.apiUrl,
         currentPortfolio: this.$store.state.portfolios.filter( portfolio => portfolio.title.toLowerCase() === 'busvel' )[0]
        }
    }
} 

An this is what I get in the DOM generated code:

<body class="" data-n-head="%7B%22class%22:%7B%22ssr%22:%22%22%7D%7D" cz-shortcut-listen="true">

This is my nuxt.config.js:

export default {
 
  mode: "universal",
 
  target: "server",
  
  dev: process.env.APP_ENV !== "production",
  vue: {
    config: {
      productionTip: true,
      devtools: true
    }
  },
  server: {
    host: "0.0.0.0"
  },
  publicRuntimeConfig: {
    baseUrl: process.env.BASE_URL || "http://localhost:3000",
    apiUrl: process.env.API_URL || "http://localhost:1337"
  },
  head: {
    title: process.env.npm_package_name || "",
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      },
      {
        hid: "description",
        name: "description",
        content: process.env.npm_package_description || ""
      }
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;800;900&display=swap" }
    ]
  },
  
  css: ["slick-carousel/slick/slick.css"],
  
  plugins: [
    "@/plugins/vue-typed.js",
    { src: "~/plugins/vue-typed.js", mode: "server" },
    { src: "~/plugins/vue-slick.js", mode: "client" },
    { src: "~/plugins/vue-parallax.js", mode: "client" }
  ],
  
  components: true,
  
  buildModules: ["nuxt-gsap"],
  
  modules: [
    // Doc: https://bootstrap-vue.js.org
    "bootstrap-vue/nuxt",
    "@nuxtjs/axios",
    "@nuxtjs/style-resources",
    "@nuxtjs/proxy"
  ],
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },
  styleResources: {
    scss: ["~assets/scss/_colors.scss", "~assets/scss/_bootstrap.scss"]
  },

  
  build: {
    devtools: true,
    html: {
      minify: {
        minifyCSS: process.env.APP_ENV === "production" ? true : false,
        minifyJS: process.env.APP_ENV === "production" ? true : false
      }
    },
    optimization: {
      minimize: process.env.APP_ENV === "production" ? true : false
    },
    postcss: {
      sourceMap: true
    },
    loaders: {
      css: {
        sourceMap: true
      },
      scss: {
        sourceMap: true,
        sassOptions: {
          outputStyle: "compressed"
        }
      }
    },
    extend(config, ctx) {
      if (ctx.isClient) {
        config.devtool = "#source-map";
      }
    }
  }
};

Please help me out if you've already faced this problem or if you know the cause of this bug.