Shared State Management Between Components And The Vue Composition API

import { ref, computed } from 'nuxt-composition-api'

const state = ref(false)

export default function useColoration() {
  const toggle = () => (state.value = !state.value)

  return {
    state: computed(() => state.value),
    toggle
  }
}

A gobally shared state between components can be achieved by keeping the state variable outside the exported function and returning computed properties.

import useColoration from '~/use/coloration'

export default {
  setup() {
    const { state: colorationState, toggle: colorationToggle } = useColoration()
    return { colorationState, colorationToggle }
  }
}

Vue Composition API
Nuxt Composition API