Nuxt 2 optional chaining is not working for template as well as in code

Question

I recently tried to upgrade my node version as nodev10 stopped support,

I had vue-template-babel-compiler installed to support optional chaining for the templates but after doing a fresh npm install, somehow I started getting Server compilation errors.

Below is my package.json

{
"name":"test",
"version":"1.0.0",
"description":"test",
"author":"",
"private":true,
"scripts":{
"dev":"nuxt",
"build":"nuxt build",
"start":"nuxt start",
"generate":"nuxt generate",
"lint":"eslint - ext .js,.vue - ignore-path .gitignore .",
"lint:fix":"eslint - fix - ext .js,.vue - ignore-path .gitignore .",
"lint:css":"stylelint - fix ./**/.{vue,scss,css}"
},
"lint-staged":{
".{js,vue}":"npm run lint:fix",
"*.{css,vue}":"npm run lint:css"
},
"husky":{
"hooks":{
"pre-commit":"lint-staged"
}
},
"dependencies":{
"@nuxtjs/axios":"5.12.2",
"@nuxtjs/dotenv":"2.4.0",
"@nuxtjs/proxy":"2.0.1",
"@nuxtjs/pwa":"3.0.0–0",
"@nuxtjs/vuetify":"1.11.3",
"axios":"0.21.0",
"bootstrap-vue":"2.21.2",
"cookie-universal-nuxt":"2.1.4",
"cross-env":"5.2.1",
"jsonwebtoken":"8.5.1",
"lodash":"4.17.20",
"moment":"2.29.1",
"nuxt":"2.0.0",
"vuex-persist":"3.1.3"
},
"devDependencies":{
"@nuxtjs/eslint-config":"2.0.0",
"@nuxtjs/eslint-module":"1.0.0",
"@nuxtjs/stylelint-module":"3.1.0",
"babel-eslint":"10.0.1",
"eslint":"6.1.0",
"eslint-plugin-nuxt":">=0.4.2",
"eslint-plugin-vue":"6.2.2",
"lint-staged":"10.0.0",
"node-sass":"6.0.1",
"sass-loader":"10.3.1",
"stylelint":"10.1.0",
"stylelint-config-standard":"20.0.0",
"vue-template-babel-compiler":"2.0.0"
},
"config":{
"nuxt":{
"host":"0.0.0.0"
}
},
"engines":{
"node":"16.x"
}
}

and my nuxt.cofig.js

build: {
loaders: {
vue: {
compiler: require('vue-template-babel-compiler')
}
},
vendor: ['axios'],
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}

error:

Module parse failed: Unexpected token (1827:43) File was processed with these loaders: * ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | }; | } else { > if (data.add?.val === null)

Note:I tried below npm package which only fix JS code optional chaining but not working for template

{

build: {
    babel: {
        plugins: [
            '@babel/plugin-proposal-optional-chaining'
        ]
    }
}

}

Looking for a solution to fix the issue with nuxt2 with nodev16 for both template and JS code.