[chainWebpack] Continues chainning doesnt work

I am trying to import a .dds file with Vue but I cant seem to properly configure the loaders in chainWebpack.

vue.config.js

module.exports = {
    publicPath: '/',
    devServer: {
        port: 9000,
        disableHostCheck: true,
    },
    transpileDependencies: ['vuetify'],
    chainWebpack: (config) => {
        config.module
            .rule('graphql')
            .test(/\.(graphql|gql)$/)
            .use('graphql-tag/loader')
            .loader('graphql-tag/loader')
            .end()
            .rule('3d-models')
            .test(/\.(glb|gltf)$/)
            .use('gltf-webpack-loader')
            .loader('gltf-webpack-loader')
            .end()
            .rule('dds') // -> Custom rule specification
            .test(/\.(dds)$/)
            .use('file-loader')
            .loader('file-loader')
            .end();
    },
    configureWebpack: {
        devtool: 'source-map',
    },
};

On npm run serve, I get the error:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

And when I run vue inspect --rule dds I get:

undefined

If I use this instead:

  chainWebpack: (config) => {
        config.module
            .rule('graphql')
            .test(/\.(graphql|gql)$/)
            .use('graphql-tag/loader')
            .loader('graphql-tag/loader')
            .end()
            .rule('3d-models')
            .test(/\.(glb|gltf)$/)
            .use('gltf-webpack-loader')
            .loader('gltf-webpack-loader')
            .end()
            .rule('images') // -> Custom rule specification
            .test(/\.(png|jpe?g|gif|dds)$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                limit: 102400,
                fallback: {
                    loader: 'file-loader',
                    options: { name: 'img/pdf/[name].[hash].[ext]' },
                },
            })
            .end();
    },

When i run vue inspect --rule images i get

/* config.module.rule('images') */
{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [
    {
      loader: '/home/pcName/development/project/projectName/node_modules/@vue/cli-service/node_modules/url-loader/dist/cjs.js',
      options: {
        limit: 4096,
        fallback: {
          loader: '/home/pcName/development/project/projectName/node_modules/@vue/cli-service/node_modules/file-loader/dist/cjs.js',
          options: {
            name: 'img/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
}

Which is different than what I added.

On vue inspect --rule graphql I get

/* config.module.rule('graphql') */
{
  test: /\.(graphql|gql)$/,
  rules: [
    {
      test: /\.(glb|gltf)$/,
      rules: [
        {
          test: /\.(png|jpe?g|gif|dds)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 102400,
                fallback: {
                  loader: 'file-loader',
                  options: {
                    name: 'img/pdf/[name].[hash].[ext]'
                  }
                }
              }
            }
          ]
        }
      ],
      use: [
        {
          loader: 'gltf-webpack-loader'
        }
      ]
    }
  ],
  use: [
    {
      loader: 'graphql-tag/loader'
    }
  ]
}

The rules work as expected if I add config.module before every rule like below:

    chainWebpack: (config) => {
        config.module
            .rule('graphql')
            .test(/\.(graphql|gql)$/)
            .use('graphql-tag/loader')
            .loader('graphql-tag/loader')
            .end()

        config.module
            .rule('3d-models')
            .test(/\.(glb|gltf)$/)
            .use('gltf-webpack-loader')
            .loader('gltf-webpack-loader')
            .end()

        config.module
            .rule('images') // -> Custom rule specification
            .test(/\.(png|jpe?g|gif|webp|dds)$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                limit: 102400,
                fallback: {
                    loader: 'file-loader',
                    options: { name: 'img/pdf/[name].[hash].[ext]' },
                },
            })
            .end();
    },
"devDependencies": {
        "@babylonjs/inspector": "^4.2.0",
        "@mdi/font": "^5.9.55",
        "@vue/cli-plugin-babel": "~4.5.11",
        "@vue/cli-plugin-eslint": "~4.5.11",
        "@vue/cli-plugin-router": "^4.5.11",
        "@vue/cli-plugin-vuex": "^4.5.11",
        "@vue/cli-service": "~4.5.11",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.2.2",
        "eslint": "^7.20.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^3.4.0",
        "eslint-plugin-vue": "^7.6.0",
        "eslint-plugin-vuetify": "^1.0.0-beta.8",
        "file-loader": "^6.2.0",
        "graphql-tag": "^2.11.0",
        "parse-dds": "^1.2.1",
        "prettier": "2.3.0",
        "raw-loader": "^4.0.2",
        "sass": "^1.32.8",
        "sass-loader": "^10.1.1",
        "url-loader": "^4.1.1",
        "vue-cli-plugin-vuetify": "~2.1.0",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12",
        "vuetify-loader": "^1.7.2"
    },

Why does continues chainning not work?