Discussion on: I have a problem with Vue composition API

[Alex Janke]

Do you mean it is not reactive that the state doesn't sync between your BurgerMenu.vue and in your Layout.vue? That is correct. Each time you call useToggleMenu() you basically create your own scope of that function, so they can run in parallel without interfering with eachother.

Check this codesandbox to see what I mean:
Codesandbox
Here I copied your code. I only changed the reactive to ref because a single value is better suited in a ref(). As you can see here the code is reactive but the two implementations do not sync.

Also you do not need to put the state in toRefs() when returning

[Aissa BOUGUERN]

Thank you Alex,
Yes i now understand what's the problem,
I need to put some mechanism to share that state between those components. something like useContext in React.js

[Alex Janke]

Normally you can just move the state out of the function.
Something like

export const state = ref(false)
export const toggleMenu = () => {
  state.value = !state.value;
}

Not tested but this should work I think