After vue2 upgrades to vue3, axios alway sends params with text/plain and the value is [object Object] ?

[rogerluo410]

I upgraded vue2 to vue3, install vue@3.5.3 and installed same version of @vue/compat, and replace vue-template-compiler (if present) with @vue/compiler-sfc, folllowed by the document: https://v3-migration.vuejs.org/migration-build.html.

And create a global axios instance:

And set global instance with vue3 way:

Webpack config is

  module.exports = {
    resolve: {
      alias: {
        vue: "@vue/compat",
      },
    },
    test: /\.vue(\.erb)?$/,
    use: [
      {
        loader: "vue-loader",
        options: {
          compilerOptions: {
            compatConfig: {
              MODE: 2,
            },
          },
        },
      },
    ],
  };

When I use the axios api get like this :

The axios always sends params with text/plain (Even though I set content-type with "application/json" in headers) and the url is like this, the value is [object Object]:

I guess there is something wrong about the encoding for vue compiler, or missing some config, but I have no idea.

Does someone know how to fix it ?

Thank you.