Vue Composition API reactivity doesn't work properly

Question

I am using Vue2, Vuetify, Vue Composition API(@vue/composition-api) The problem I faced is that composition api reactivity doesn't work properly.

Let me show you some code

---- companies.vue ----

<template>
  ...
  <v-data-table
    :headers="companiesHeaders"
    :items="companies"
    :loading="loadingCompanies"
  />
  ...
</template>

<script>
...
import { useCompanies } from '@/use/companies'

export default {
  setup: (_, props) => {
    ...
    const {
      companies,
      loadingCompanies,
      getCompanies
    } = useCompanies(context)

    onMounted(getCompanies)

    return {
      ...,
      companies,
      loadingCompanies
    }
  }
}
</script>

---- @/use/companies.ts ----

import { ref } from '@vue/composition-api'

export const useCompanies = (context: any) => {
  const { emit, root } = context

  const companies = ref([])
  const loadingCompanies = ref(false)

  const getCompanies = async () => {
    if (loadingCompanies.value) { return }

    try {
      loadingCompanies.value = true
      companies.value = (await root.$repositories
        .companies.getCompanies()).data

      console.log(companies.value)
      // This log works properly. It logs company list once received
      // But even after this async function is finished, companies and loadingCompanies are not updated automatically
    } catch (err) {} finally {
      loadingCompanies.value = false
    }
  }

  return {
    companies,
    loadingCompanies
  }
}

I tried with both ref and reactive. But reactivity for whatever inside companies.vue doesn't work.

Did you try to check the reactivity of companies without the v-data-table? Can you add a link to CodePen? — Matan Yadaev
Thanks @MatanYadaev I already resolved the issue. The issue was that I called useCompanies api in 2 components. One for create company dialog and one for company list page. And I was curious about changes in the dialog doesn't affect to company list page. Now I moved companies variable to out of useCompanies api, so that it can be used as global state. Now it works fine. — Aito Hideki

Aito Hideki Aito Hideki · Accepted Answer · 2020-09-09T08:50:25

I resolved the issue. The issue was that company variable instance was created in 2 places(one for create company dialog and one for table), so changes in one place(create company dialog) didn't affect to the other(table). Thanks.

Vue Composition API reactivity doesn't work properly

1 Answers