I have a page showing details of a User and need to display the invoices belonging to that user.

<template>
    <div>
        <div>
            // Child component one .....
        </div>
        <div>
            // Child component two .....
        </div>

        <div>
            // Invoice component one .....
            <invoice-list :vendor-id="vendorData.id"/>
        </div>
    </div>
</template>

I have a JS file that calls the API to fetch the data, imported in the invoice template. I am trying to get the vendorId in that JS file so that it can be passed as a param.

My invoice template looks like:

<template>
    <div class="wrapper">
        <!-- Table Container grid -->
        ---------
        ---------
        ---------
    </div>
</template>

<script>
import { onUnmounted } from '@vue/composition-api'
import store from '@/store'
import useInvoicesList from './useInvoiceList'
import invoiceStoreModule from '../invoiceStoreModule'


export default {
  props: {
    vendorId: {
      type: String,
      required: false,
    },
  },
  setup(props) {
    
    const {
      fetchInvoices,
      refetchData,
    } = useInvoicesList()

    return {
      fetchInvoices,
      refetchData,
    }
  },
}
</script>

My useInvoiceList.js looks like:

import { ref, watch, computed } from '@vue/composition-api'
import store from '@/store'

export default function useInvoicesList() {

  const refInvoiceListTable = ref(null)

  const fetchInvoices = (ctx, callback) => {
    store
      .dispatch('app-invoice/fetchInvoices', {
        q: searchQuery.value,
        **/*This is where I need the vendor ID*/**
      })
      .then(response => {
       
      })
      .catch(() => {
        
      })
  }

  return {
    fetchInvoices,
    refInvoiceListTable,
    refetchData,
  }
}

How would I get the vendor ID in the fetchInvoices method?