vue get data from method

<template>
  <div>
    <button @click="getData">Get Data</button>
    <p>{{ responseData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      responseData: null
    };
  },
  methods: {
    getData() {
      // Step 1: Make an API request (assuming using axios for simplicity)
      axios.get('https://api.example.com/data')
        .then(response => {
          // Step 2: Update the responseData with the received data
          this.responseData = response.data;
        })
        .catch(error => {
          // Handle any errors that occurred during the API request
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>