Test out the following code snippet: it will only display once fully loaded

<div v-if="tools">
    This is the default child component
    {{tools[0].name}}
</div>

One method I commonly use is to employ a loader to indicate to the user that a request is currently being processed

<div v-if="loading">
  <loader /> //a loader component
</div>

<div v-else>
  // display the template once the request is completed
</div>

Here's the script snippet:

export default {
  data: () => ({
    loading: false
  }),

  created() {
   this.loading = true
   axios.get('api') //making your request
   .then(response => console.log(response))
   .finally(() => (this.loading = false)) //updating loading state after completion
  }

}

If you prefer, an alternative approach involves using beforeEnter so that the route will only load once the request has finished:

{
  path: '/my-route',
  component: YourComponent,
  props: true,
  beforeEnter (to, from, next) {
    axios.get('api-request')
     .then(response => {
      to.params.data = response //passing data as props to the component
      next()
     })
  }
}

<template>
    <div v-if="isDataLoaded">
        Displaying Default child component
        {{tools[0].name}}
    </div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
    tools: []
  },
  data: function () {
    return {
      isDataLoaded: false
    }
  },
  methods: {
      fetchData() {
        const customJs = new CustomJS();
        this.tools = customJs.getTools();
        this.isDataLoaded = true;
      }
  },
  created() {
    this.fetchData(); //waiting for response here
  }
}
</script>

Be sure to include a v-if statement in your div and update the isDataLoaded variable to true once you receive the result from AXIOS.

To implement the desired functionality, you should define your getTools function as a promise in the following way:

getTools (id = 0) {
  return new Promise((resolve, reject) => {
    this.apiTool += (id > 0) ? id : '';
    axios.get(this.apiTool, {
    })
    .then(function (response) {
        console.log(response.data);
        resolve(response.data);
    })
    .catch(function (error) {
        console.log(error);
        reject(error)
    });
  })
}

After defining the function, you can utilize it within your component code as shown below:

<template>
    <div>
        This is Default child component
        {{tools[0].name}}
    </div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
    tools: []
  },
  methods: {
      fetchData() {
        const customJs = new CustomJS();
          customJs.getTools().then((result) => {
            return result;
          }
        )

      }
  },
  created() {
    this.tools = this.fetchData(); //It would be ideal to wait for the response here
  }
}
</script>

You can also integrate async/await in the implementation like so:

<template>
    <div>
        This is Default child component
        {{tools[0].name}}
    </div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
    tools: []
  },
  methods: {
      async fetchData() {
      const customJs = new CustomJS();
      return await customJs.getTools()  
      }
  },
  created() {
    this.tools = this.fetchData(); //It would be optimal to wait for the response here
  }
}
</script>

Ensure that your request function returns a promise

<template>
<div>
    This is the default child component
    {{tools[0].name}}
</div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
      tools: []
  },
  methods: {
      fetchData() {
         const customJs = new CustomJS();
         return new Promise((resolve, reject) => {
             customJs.getTools()
                 .then(res => resolve(res))
                 .catch(err => reject(err))
        })
     }
  },
  created() {
      this.fetchData().then(res => {
         this.tools = res);
      } // Need to wait here for response ideally
    }
   }
 </script>

Attempt retrieving data from mounted components

    <template>
    // consider adding this condition to the div element.
                <div v-if="tools.length">
                    This is the default child component
                    {{tools[0].name}}
            </div>
        </template>

        <script>
        import { CustomJS } from '../js/custom.js';

        export default {
          name: 'HomeContent',
          props: {
            tools: []
          },
          methods: {
              fetchData() {
                const customJs = new CustomJS();
                return customJs.getTools();
              }
          },
          mounted: function () {
            this.tools = this.fetchData();    
            // or    
            // const customJs = new CustomJS();
            // this.tools =  customJs.getTools();
          }
        }
        </script>

Why is this question showing up in my feed? I haven't seen the accepted answer, so I'll provide my own insights. The issue seems to lie in the OP's understanding of asynchronous JavaScript code. Here are three ways to improve it:

<template>
    <div v-if="tools.length">
        {{tools[0].name}}
    </div> 
    <div v-else> // Utilize v-if/v-else for conditional data display. In Vue 3, there will be a new feature called "suspense" designed for this purpose: https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/
        This is the default child component
    </div>
</template>

<script>
import { CustomJS } from '../js/custom.js';

export default {
  name: 'HomeContent',
  props: {
    tools: []
  },
  methods: {
    async fetchData() {
      const customJs = new CustomJS();
      this.tools = await customJs.getTools(); 
      // By awaiting the promise, data is properly assigned to this.tools. Earlier, the OP had just assigned a promise without resolving it, causing issues.
    }
  },
  created() {
    this.fetchData();
  }
}
</script>

async getTools(id = 0){
  this.apiTool += (id > 0) ? id : '';

  try {
    const response = await axios.get(this.apiTool, {});
    console.log(response.data);
    return response.data; 
    // The OP missed returning fetched data altogether. All returns were within arrow functions, but the main function getTools lacked a return statement.

  }
  catch (err) {
    console.log(err)
  }
},