[Vue warn]: Injection "Symbol(pinia)" not found

[varna]

I'm using pinia with vue2 and @vue/composition-api.

It works nicely when I mount it to the Main App of vue-cli:

stores/index.js:

import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)

export const pinia = createPinia()

main.ts:

import Vue from 'vue'
import vuetify from './App/config/vuetify'
import './plugins'
import '@/Map/config/plugin'
import './App/config/VueFilters.js'
import i18n from '@/i18n'
import App from './App/components/App.vue'
import router from './App/router'
import store from './App/store'
import { pinia } from './stores'
import './components/_global'
// import './registerServiceWorker'

Vue.config.productionTip = false
Vue.config.performance = true

export default new Vue({
  // @ts-ignore
  vuetify,
  i18n,
  router,
  store,
  pinia,
  render: h => h(App)
}).$mount('#app')

store.dispatch('initialAction')

I use a library (mapbox-gl) that provides me with a map. It lets me add control components that extend IControl class. I want to use vue in them. That's why I create a new vue instance for it with:

const app = createApp(Component);
app.use(pinia);
app.mount();

This is when I get an error from Pinia:

Full code for the mentioned component:
FieldsControl.js:

import { defineComponent, createApp, nextTick } from "@vue/composition-api";
import { useFieldsStore } from "@/stores/fields";
import { pinia } from "@/stores";

const FieldsControlComponent = defineComponent({
  setup() {
    const fieldsSotre = useFieldsStore();

    return {
      fieldsSotre,
    };
  },
  render() {
    return (
      <button type="button" onClick={this.fieldsStore.setSelected([])}>
        <span class="sr-only">Close</span>
        <CloseIcon aria-hidden="true" />
      </button>
    );
  },
});

const app = createApp(FieldsControlComponent);
app.use(pinia);

export default class FieldsControl {
  onAdd(map) {
    this._map = map;
    this._container = document.createElement("div");
    // container is only mounted to DOM after returning it,
    // so you need to mount Vue afterwards with nextTick (or other timeout)
    nextTick(() => {
      app.mount(this._container);
    });
    return this._container;
  }

  onRemove() {
    app.unmount();
    this._container.parentNode.removeChild(this._container);
    this._map = undefined;
  }
}

I tried following https://pinia.vuejs.org/getting-started.html#installation

[varna]

It was a typo... fieldsSotre !== fieldsStore .
So, I'm still seeing this error (but the store works now)

Replacing

const app = createApp(FieldsControlComponent);
app.use(pinia);

with

const app = new Vue({
  pinia,
  render: h => h(FieldsControlComponent)
})

removes this error

[tenadolanter]

I get the same error tips [Vue warn]: Injection "Symbol(pinia)" not found.

And i am sure pinia is registered in a correct way.

I took a few hours and finaly got why.

I called pinia while it is not be installed success, i got this error when watch a var and use pinia immediate like this:

watch: {
   testVar: {
       immediate: true,
       deep: true,
       handler(){
        //  call pinia
       }
   }
}