Nuxt3 nitro devproxy/routeRules for Api not taking effect

Question

My Vuejs3, Nuxt3 application runs at http://localhost:3000 and API backend runs at http://localhost:8080. All API calls beginning with url /wapi must be served by the backend. I could do this in the older version of Nuxt (2) but with Nuxt3(Nitro) I am not able to make it work. Official documentation - Nitro-RouteRules

nuxt.config.ts

export default defineNuxtConfig({
nitro: {
    routeRules: {
      '/wapi/**': {
        proxy: 'http://localhost:8080/**'
      }
    }
  }
})

I have tried different url patterns like /wapi, /wapi/** etc but they do not work. And same with the proxy with or w/o ** etc

This works for me in Nuxt 2

export default {
  proxy: {
    '/wapi': 'http://localhost:10214/'
  }
}

inside my vue page, I am calling the API using useFetch like:

<script>
export default defineComponent({
  data () {},
  methods: {
    some_onClick () {
       // async block
       const { data } = await useFetch('/wapi/test'); // results in 404 though the resource exists on the backend server

    }
  }
})
</script>

All calls to API backend result in 404. the same on Nuxt2 with the above config work. (Nuxt2 uses default fetch API) - Fetch API

Is the configuration wrong or the useFetch does not support proxying?