I am quite new to Vue.js coming from a React background. I have a reactive variable config which is passed to provide() function in a component and used by other component using inject(). But the the value in provide is not getting updated once reactive variable is updated.

Component A

<script>
const localState = reactive({
  resellingAmount: null,
})

const salesPrice = computed(() => localState.resellingAmount)

const config = reactive({
  amount: salesPrice.value,
})

provide('config', config)

onMounted(async () => {
  const response = await ListingService.getLocationResellingConfiguration(location.value.id)
  localState.resellingAmount = response.data.amount
  window.addEventListener('resize', reloadOnResize)
})
</script>
<template>
...
</template>

Component B

<script>
const store: object = inject('store')
</script>

<template>
  <div><h1>{{ config.amount }}</h1></div>
</template>

Expected Behaviour – Component B should display new value of amount

Actual Behaviour – Component B is still displaying old value of amount