Unexpected asynchronous action in "" computed property vue/no-async-in-computed-properties Vue3

I am developing my project with Vue3 , I am getting this error while running, here is my whole code . Can someone help me fix it. Thank you guys

<script>
import axios from 'axios';
export default {
  name: "RegisterView",
  data() {
    return {
      user: {
        username: "",
        password: "",
        email: "",
        phoneNumber: "",
        role: "",
      },
      role : []
    };
  },computed:{
    getRole(){
       axios.get('http://localhost:8080/api/role/get').then(res=>{
        this.role = res.data;
      })
      return [];
    }
  },
  methods: {
    register() {
      axios.post("http://localhost:8080/api/user/register", this.user).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>

// Error  Unexpected asynchronous action in "getRole" computed property  vue/no-async-in-computed-properties

I tried async and await , but it seems I got it wrong

>Solution :

Try to run that call inside the created hook :

import axios from 'axios';
export default {
  name: "RegisterView",
  data() {
    return {
      user: {
        username: "",
        password: "",
        email: "",
        phoneNumber: "",
        role: "",
      },
      role : []
    };
  },
   created(){
     this.getRole():
  },
  methods: {
    getRole(){
       axios.get('http://localhost:8080/api/role/get').then(res=>{
        this.role = res.data;
      }).catch(err=>{
          this.role = []
      })
    
    },
    register() {
      axios.post("http://localhost:8080/api/user/register", this.user).then((res) => {
        console.log(res.data);
      });
    },
  },
};