Vue3 vue-svg-loader使用出现异常

vue3使用了 vue-svg-loader,可以直接引入svg文件当组件
但是style无法像vue2正确引用了

demo.vue
<template>
    <div class="app">
        <LogoInline />
    </div>
</template>
<script>
import LogoInline from '@/assets/logo.svg?inline'
export default {
    components: { LogoInline }
}
</script>
<style>
.app {
    background-image: url(~@/assets/bg.svg?bg);
}
</style>

最终浏览器控制台看到如下

css:
background-image: url([object Object]);
vue.config.js
chainWebpack: (config) => {
    config.resolve.alias.set('@$', resolve('src'))
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()

    svgRule
      .use('vue-loader-16')
        .loader('vue-loader-v16') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI
        .end()
      .oneOf('inline')
        .resourceQuery(/inline/)
        .use('vue-svg-loader')
          .loader('vue-svg-loade-v16')
        .end()
      .end()
      .oneOf('bg')
        .resourceQuery(/bg/)
        .use('file-loader')
          .loader('file-loader')
            .options({
              name: 'assets/[name].[hash:8].[ext]'
            })
        .end()
      .end()