↓のようにv-modelで取得したusernameをconst data内にセットしてAPI呼びたいのですが、
リクエスト投げたタイミングで渡した内容確認してもconst data内のusernameが空のままです。
どうすればconst data内のusernameに値を設定できるのでしょうか?
※API呼び出せるまでは確認済です。

/*<body>
<div id="app">
<input type="text" id="username" v-model="username" autocomplete="off" placeholder="Enter username">
<button :class="btnClass" @click="loginauth">ログイン</button>
</div>
  <script>


    const { createApp, ref } = Vue;
    createApp({
      setup() {
        const username = ref('');

        const data = {
          'username': username.value
        };

        const config = {
          headers:{
            'Content-Type': 'application/json; charset=utf-8',
            'X-CSRF-TOKEN': 'ZZZZZZ'
          }
        };

        const loginauth = () => {
          axios.post('/test', data, config)
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        };

        return {
          username,
          loginauth
        };
      }
    }).mount('#app');

  </script>
</body> */