provide/inject @vue/composition-api not updating

Question

Note that I'm not using vue 3 but @vue/composition-api with vue 2.

My router has the following:

{
  path: `/:country(${
    Object.keys(config.countries).join('|')
  })?/:locale(${
    Object.keys(config.languages).join('|')
  })?`,
  props:true,
  component: Root,

My Root component has:

setup(props) {
  const loc=ref(props.locale);
  watch(()=>props.locale,
  (current)=>{
    // eslint-disable-next-line no-console
    console.log('in root watch',current);
    loc.value=current
  }
  )
  provide('locale', loc);
},

When changing route I do get the log saying it changed but in any component where I use inject it doesn't update:

setup(){
  const locale = inject('locale')
  console.log('locale from inject:',locale.value)
  watch(
    () => locale,
    (...args)=>{
      //never logs
      console.log('args:',args)
    }
  );
},

HMR HMR · Accepted Answer · 2021-03-25T17:05:50

I was using watch wrong, in the child I should have done:

setup(){
  const locale = inject('locale')
  watch(
    locale,//not a function but an observable
    (...args)=>{
      //works
      console.log('args:',args)
    }
  );
},

provide/inject @vue/composition-api not updating

1 Answers