Error object in Vue async catch block is undefined in debugger

I have this Vue component which works fine but debugging is a problem in VSCode:

<template>
 <div>   
     <button @click="test">Test</button>
 </div>
</template>

<script>

  async function Test() {

    try {
        throw('zzzzz');
    } catch (e) {
        let x = e;
        console.log(e); //This logs fine
        console.log(x); //This logs fine
        let z = 'break here';
        /********************
        Break on the line above and inspect 'e' in the debug console,
        it is 'undefined'    
        *********************/
    }
  }

  export default {

    data(){
      return {
      }
    },

    methods: {
      test: async function () {
        await Test();
      }
    }

  }
    </script>

As per the comments in the code, both e and x appear to be set correctly except I cannot inspect e (in vscode's debug console + chrome dev tools), which obviously complicates debugging as I wouldn't usually have the console.log statements.

Besides this the debugging works fine. Interestingly, making the function non-async as below then 'e' can be inspected as expected.

  function Test(user)

Am I perhaps missing some config to cause this?