Vue3 top-level await Eslint fails

Question

Following the official documentation: https://vuejs.org/api/sfc-script-setup.html#top-level-await

I'm trying to create an async component like that:

<template>
  <p>Async data: {{asyncData}}</p>
</template>

<script setup>
import {ref} from 'vue'
const asyncData = ref(null)
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
await sleep(2000);
asyncData.value = 'abcd1234'
</script>

The component works fine. The problem is: Eslint detects that error:

Parsing error: Cannot use keyword 'await' outside an async function

How can I deal with that?

In fact it's Vue who is forcing me to write an invalid code...

Answer 1

I see it can be solved updating Eslint config:

.eslintrc.cjs

module.exports = {
  root: true,
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2022,
  },
  ...
};

But shouldn't be as default?