Vue2-vite optionsAPI not working

[R0N1n-dev]

Reproduction

Following instructions on Pinia site to use Pinia with Vue 2 and vite and options API.
Installed composition API and pinia as instructed.
on running 'npm run dev':

get the following error in the console;
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'startsWith')"

found in

---> at src/components/HelloWorld.vue
at src/App.vue

warn @ vue.runtime.esm.js:619
logError @ vue.runtime.esm.js:1893
globalHandleError @ vue.runtime.esm.js:1888
handleError @ vue.runtime.esm.js:1848
Vue2._render @ vue.runtime.esm.js:3571
updateComponent @ vue.runtime.esm.js:4081
get @ vue.runtime.esm.js:4495
Watcher2 @ vue.runtime.esm.js:4484
mountComponent @ vue.runtime.esm.js:4088
Vue.$mount @ vue.runtime.esm.js:8459
init @ vue.runtime.esm.js:3137
createComponent2 @ vue.runtime.esm.js:6022
createElm @ vue.runtime.esm.js:5969
patch2 @ vue.runtime.esm.js:6521
Vue2._update @ vue.runtime.esm.js:3960
updateComponent @ vue.runtime.esm.js:4081
get @ vue.runtime.esm.js:4495
Watcher2 @ vue.runtime.esm.js:4484
mountComponent @ vue.runtime.esm.js:4088
Vue.$mount @ vue.runtime.esm.js:8459
init @ vue.runtime.esm.js:3137
createComponent2 @ vue.runtime.esm.js:6022
createElm @ vue.runtime.esm.js:5969
patch2 @ vue.runtime.esm.js:6560
Vue2._update @ vue.runtime.esm.js:3960
updateComponent @ vue.runtime.esm.js:4081
get @ vue.runtime.esm.js:4495
Watcher2 @ vue.runtime.esm.js:4484
mountComponent @ vue.runtime.esm.js:4088
Vue.$mount @ vue.runtime.esm.js:8459
(anonymous) @ main.js:13
vue.runtime.esm.js:1897 TypeError: Cannot read properties of undefined (reading 'startsWith')
at devtoolsPlugin (pinia.esm-browser.js:878:19)
at pinia.esm-browser.js:1548:48
at EffectScope2.EffectScopeImpl2.run (vue-composition-api.mjs:197:24)
at pinia.esm-browser.js:1548:38
at Array.forEach ()
at createSetupStore (pinia.esm-browser.js:1545:14)
at createOptionsStore (pinia.esm-browser.js:1142:13)
at useStore (pinia.esm-browser.js:1622:17)
at VueComponent.reduced. (pinia.esm-browser.js:1723:24)
at Watcher2.get (vue.runtime.esm.js:4495:25)

Steps to reproduce the behavior

Using: matt-auckland/vite-vue2-starter template:
cloned above repository
npm install
npm install pinia @vue/composition-api

HelloWorld.vue
"

Ronin

count {{ count }}

double count {{ doubleCount }}

Increment Reset

" <script> import { useCountStore } from "../stores/count"; import { mapStores, mapActions, mapState } from "pinia"; export default { name: "HelloWorld", data() { return {}; }, methods: { ...mapActions(useCountStore, ["reset", "add"]), }, computed: { ...mapStores(useCountStore), ...mapState(useCountStore, ["count", "doubleCount"]), }, }; </script>

main.js
import Vue from "vue";
import { createPinia, PiniaVuePlugin } from "pinia";
import App from "./App.vue";

const pinia = createPinia();
Vue.use(PiniaVuePlugin);

new Vue({
pinia,
render: (h) => h(App),
}).$mount("#app");

stores/count/js

import { defineStore } from "pinia";

export const useCountStore = defineStore({
// name of the store
// it is used in devtools and allows restoring state
//id: 'main',
// a function that returns a fresh state
state: () => ({
count: 0,
name: "Eduardo",
}),
// optional getters
getters: {
doubleCount() {
return this.count * 2;
},
// use getters in other getters
doubleCountPlusOne() {
return this.doubleCount * 2 + 1;
},
},
// optional actions
actions: {
reset() {
// this is the store instance
this.count = 0;
},

add() {
  this.count++;
},

},
});

vscode terminal output
ronin@ronin-HP-Laptop:~/vite-vue2-pinia$ npm run dev

[email protected] dev
vite

Port 3000 is in use, trying another one...

vite v2.7.12 dev server running at:

Local: http://localhost:3001/
Network: use --host to expose

ready in 1398ms.

^C
ronin@ronin-HP-Laptop:~/vite-vue2-pinia$ npm run dev

[email protected] dev
vite

Port 3000 is in use, trying another one...

vite v2.7.12 dev server running at:

Local: http://localhost:3001/
Network: use --host to expose

ready in 1391ms.

Expected behavior

It works and the page displays the counter

Actual behavior

Blank page with the above console error, despite the fact that the server has started succesfully

Additional information

Add any other context about the problem here.
Could be useful if the examples section of the Pinia github had a vue 2 example with options API for setup purposes.
All examples use typescript and setup() which not everyone is using yet.

[R0N1n-dev]

Solved.
Basically, you need to import compositionAPI and use it to start the app much like Vue3

import VueCompositionAPI, { createApp, h } from '@vue/composition-api'
import { createPinia, PiniaVuePlugin } from 'pinia'

import App from './App.vue'
import router from './router'

Vue.use(VueCompositionAPI)

const app = createApp({
  router,
  pinia: createPinia(),
  render: () => h(App)
})
app.use(PiniaVuePlugin)

app.mount('#app')

This small key part is not written in the pinia documentation.
Should be added to pinia docs.
Funny how a discussion has stalled this long.