<template>
  <div>
    <button @click="fetchData">Call Interface</button>
    <div v-if="apiResponse">
      <p>Interface Return Data: {{ apiResponse }}</p>
    </div>
    <div v-if="error">
      <p>Error Message: {{ error }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ref } from 'vue';

export default {
  setup() {
    // Simulate Token and Client ID
    const token = 'YOUR_ACTUAL_TOKEN';
    const clientId = 'YOUR_CLIENT_ID';

    // Reactive references for storing API responses and error messages
    const apiResponse = ref(null);
    const error = ref(null);

    // Define the async function fetchData to send HTTP requests
    const fetchData = async () => {
      try {
        // Create an axios instance and set request headers
        const instance = axios.create({
          baseURL: 'https://api.example.com',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Clientid': clientId
          }
        });

        // Send a GET request to the specified API endpoint
        const response = await instance.get('/endpoint');

        // Store the response data in the reactive reference apiResponse
        apiResponse.value = response.data;
      } catch (err) {
        // Catch and store error messages in the reactive reference error
        error.value = err.message;
      }
    };

    // Expose reactive references and functions to the template
    return {
      apiResponse,
      error,
      fetchData
    };
  }
};
</script>