Just starting out with Vue.js and attempting to bind option data from an API response.

I've made an axios call in the mounted() hook and assigned the companies data from the response, but I'm encountering errors as shown below.

    373:11  error  'companies' is not defined  no-undef
    444:7   error  'companies' is not defined  no-undef

Even though I've assigned the API response data to the company variable, it doesn't seem to be working. Can someone provide guidance?

Template Section:

    <template>
    
    ....
    
    <validation-provider
      #default="validationContext"
      name="Company"
      rules="required"
    >
      <b-form-group
        label="Company"
        label-for="company"
        :state="getValidationState(validationContext)"
      >
        <v-select
          v-model="userData.company"
          :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'"
          :options="companies"
          :clearable="false"
          input-id="company"
        />
        <b-form-invalid-feedback :state="getValidationState(validationContext)">
          {{ validationContext.errors[0] }}
        </b-form-invalid-feedback>
      </b-form-group>
    </validation-provider>
    
    .....
    
    </template>

Script Section:

    <script>
    import {
      BSidebar, BForm, BFormGroup, BFormInput, BFormInvalidFeedback, BButton,
    } from 'bootstrap-vue'
    import { useToast } from 'vue-toastification/composition'
    import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
    import { ValidationProvider, ValidationObserver } from 'vee-validate'
    import { ref } from '@vue/composition-api'
    import { required, alphaNum, email } from '@validations'
    import formValidation from '@core/comp-functions/forms/form-validation'
    import Ripple from 'vue-ripple-directive'
    import vSelect from 'vue-select'
    import countries from '@/@fake-db/data/other/countries'
    import store from '@/store'
    import axios from '@/libs/axios'
    
    export default {
      components: {
        BSidebar,
        BForm,
        BFormGroup,
        BFormInput,
        BFormInvalidFeedback,
        BButton,
        vSelect,
    
        // Form Validation
        ValidationProvider,
        ValidationObserver,
      },
      directives: {
        Ripple,
      },
      model: {
        prop: 'isAddNewUserSidebarActive',
        event: 'update:is-add-new-user-sidebar-active',
      },
      props: {
        isAddNewUserSidebarActive: {
          type: Boolean,
          required: true,
        },
        roleOptions: {
          type: Array,
          required: true,
        },
        planOptions: {
          type: Array,
          required: true,
        },
      },
      data() {
        return {
          required,
          alphaNum,
          email,
          countries,
        }
      },
      mounted() {
        const accessToken = JSON.parse(localStorage.getItem('userData'))
        axios.get('companies/all', {
          headers: {
            Authorization: accessToken.accessToken,
          },
        })
          .then(
            response => {
              companies = response.data
            },
          )
      },
      setup(props, { emit }) {
        const blankUserData = {
          name: '',
          username: '',
          email: '',
          password: '',
          role: null,
          currentPlan: null,
          company: '',
          country: '',
          contact: '',
        }
    
        const userData = ref(JSON.parse(JSON.stringify(blankUserData)))
        const resetuserData = () => {
          userData.value = JSON.parse(JSON.stringify(blankUserData))
        }
        const toast = useToast()
    
        // const companies = companies
    
        const onSubmit = () => {
          store.dispatch('app-user/addUser', userData.value)
            .then(
              response => {
                if (response.status === 1) {
                  emit('refetch-data')
                  emit('update:is-add-new-user-sidebar-active', false)
    
                  toast({
                    component: ToastificationContent,
                    props: {
                      title: response.message,
                      icon: 'CheckIcon',
                      variant: 'success',
                    },
                  })
                } else {
                  toast({
                    component: ToastificationContent,
                    props: {
                      title: response.message,
                      icon: 'InfoIcon',
                      variant: 'danger',
                    },
                  })
                }
              },
              error => {
                console.log(error)
              },
            )
        }
    
        const {
          refFormObserver,
          getValidationState,
          resetForm,
        } = formValidation(resetuserData)
    
        return {
          userData,
          onSubmit,
    
          refFormObserver,
          getValidationState,
          resetForm,
          companies,
        }
      },
    }
    </script>