Vue error

App.vue

<template>
  <div>
    <TunnelsView />
  </div>
</template>

<script>
import TunnelsView from './Tunnels.vue';

export default {
  name: 'Dashboard',
  components: {
    TunnelsView
  },
data() {
  return {}
},
mounted() {
  console.log('Dashboard component mounted');
}
}
</script>

Tunnels.vue

<template>
     
  </template>
  
  <script>
  import axios from 'axios'
  
  
  export default {
    name: 'Tunnels',
    data() {
      return {
        tunnels: [],
        fields: [
          {
            key: 'name',
            label: 'Name'
          },
          {
            key: 'host',
            label: 'Host'
          },
          {
            key: 'target',
            label: 'Target'
          }
        ],
        addtunnelmodalOpen: false,
        showOverlayaddtunnel: false,
        newTunnel: {
          name: '',
          host: '',
          target: ''
        },
        hostValidationState: null,
        nameValidationState: null,
        targetValidationState: null,
        firstfetch: true,
      }
    },
    created() { 
      
        if (this.firstfetch) {
        this.firstfetch = false
        this.fetchTunnels()
        }

    },
    methods: {
      async fetchTunnels() {
        try {
          const accessToken = this.$auth.getAccessToken()
          const response = await axios.get("https://socksproxyapi.darrenmc.xyz/api/tunnels/list", {
            headers: {
              Authorization: accessToken
            }
          })
          this.tunnels = response.data
        } catch (error) {
          console.error("Error fetching tunnels:", error)
        }
      },
     
    },
    watch: {
    },
    errorCaptured(error, vm, info) {
    console.log('errorCaptured', error, info)
    return false; // Prevents the error from propagating further
  },
  }
  </script>