Can't render Math Equations in this

[sparxastronomy]

I'm using mathjax Properly I'm getting the following outputs:

While, the expected output is this, And I'm only getting that only in my local development environment using gridsome develop.

My package.json is

{
  "name": "gridsome-docs",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "devDependencies": {
    "@gridsome/plugin-google-analytics": "^0.1.0",
    "@gridsome/plugin-sitemap": "^0.2.3",
    "@gridsome/remark-prismjs": "^0.3.0",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.6.4",
    "fuse.js": "^6.4.6",
    "gridsome": "^0.7.23",
    "gridsome-plugin-tailwindcss": "^2.2.36",
    "node-sass": "^4.14.1",
    "prism-themes": "^1.3.0",
    "sass-loader": "^10.2.0",
    "tailwindcss": "^1.9.6",
    "vue-feather-icons": "^5.0.0"
  },
  "dependencies": {
    "gridsome-remark-katex": "^0.1.1"
  }
}

I've also tried it by using remark-math and remark-html-math having the following json.config file, but still facing the same problems:

{
  "name": "gridsome-docs",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "devDependencies": {
    "@gridsome/plugin-google-analytics": "^0.1.0",
    "@gridsome/plugin-sitemap": "^0.2.3",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.6.4",
    "fuse.js": "^6.4.6",
    "gridsome": "^0.7.23",
    "gridsome-plugin-tailwindcss": "^2.2.48",
    "node-sass": "^6.0.1",
    "prism-themes": "^1.9.0",
    "sass-loader": "^10.2.0",
    "vue-feather-icons": "^5.0.0"
  },
  "dependencies": {
    "@gridsome/remark-prismjs": "^0.3.0",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.3.0",
    "postcss-import": "^13.0.0",
    "remark-html-katex": "^1.2.0",
    "remark-math": "^1.0.6",
    "tailwindcss": "^2.2.16"
  }
}