Class import into Vue component

I want to make separate class for axios requests, which works like "service"

Vue component:

<template>
    <div v-for="user in users">
        {{ user.firstname }} - {{ user.lastname }} - {{ user.middlename }}
    </div>
</template>
<script>
    import ConnectionService from './ConnectionService';
    const connectionService = new ConnectionService();
    export default {
        mounted() {
            console.log('Component is mounted');
        },
        created() {
            this.users = connectionService.getSingleInstance('http://laravelapi/user');
            console.log("This are users " + this.users);
        },
        data() {
            return {
                users: [],
            }
        }
    }
</script>

And the service is the following:

export default class ConnectionService {
    getSingleInstance(path) {
        console.log('This is path ' + path);
        let axios_data = {};
        axios.get(path).then(response => axios_data = response.data.result);
        console.log('This is data ' + axios_data);
        console.log(axios_data);
        return axios_data;
    }

}

As I can see in my console, I get the data from axios xhr request, but then they are not passed to the Vue Component, because I get empty object in the string console.log("This are users " + this.users);

How to import COnnectionService properly and then use it in Vue Component?