I'm busy with a client management system project, but I'm having a bit of trouble with my async functions. I do the api calls in a seperate js file APIController\api.js and in the UserForm.vue component I have an async function createUser that is supposed to call two functions ported into the component as props. The code is as follows:

I have the ref and APIController imported:

import { ref } from 'vue';
import APIController from '@\Controllers\api';

I have the props imported:

props: ["toggleForm", "fetchUsers", "userId"],

And finally my setup function with the async function:

setup(props){
        const user = ref({});
        const createUser = async () => {
            const success = await APIController.CreateUser(user.value.name, user.value.phone, user.value.address);
            if(success){
                props.fetchUsers();
                props.toggleForm();
            }
        }
    }

Here's the APIController.CreateUser() function for further clarification:

CreateUser: (name, phone, address) => {
        if(
            name == "" ||
            phone == "" ||
            address == ""
        ) {
            return false;
        } else {

            fetch(API_BASE + "/users/create", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ name, phone, address })
            }).then(response => response.json())
            .then(data => {
                if(data.success){
                    return data.response.user;
                } else {
                    throw data.response.error;
                }
            }).catch(err => {
                alert(err);
            });
        }
    },

The function executes the api call perfectly, but the if statement doesn't execute at all. Any help will be appreciated. Thank you.