Version

6.1.4

Browser and OS info

Chrome 100.0.4896.88 / macOS 12.3

Steps to reproduce

# 1. create project
$ npm create vite@latest vue3-ts-pinia -- --template vue-ts

#  install pinia
$ npm i -S pinia

// 2. use pinia

import { createApp } from 'vue';
import App from './App.vue';

import { createPinia } from 'pinia';

const app = createApp(App);

// const pinia = createPinia();
// app.use(pinia);

app.use(createPinia());

createApp(App).mount('#app');

// 3. create store
import { defineStore } from 'pinia';

export const appStore = defineStore('appStore', {
  state() {
    return {
      msg: "Hello World!",
    };
  },
  getters: {
    // computed
    getMsg(): string {
      return `👻 ${this.msg}`;
    }
  },
  actions: {
    // methods
    updateMsg(str: string) {
      this.msg = str;
    },
    async fetchData(url: string) {
      const json = await fetch(url).then(res => res.json());
      // console.log('json =', json);
      return json;
    },
  },
});

<!-- 4. use store -->
<template>
  <template v-if="true">
    <div>{{store.msg}}</div>
  </template>
  <template v-if="true">
    <div>{{store.getMsg}}</div>
    <pre>❓ {{store.msg}}</pre>
    <span v-pre>{{ this will not be compiled }}❓ {{store.msg}}</span>
    <button @click="updateMsg">Pinia 🍍</button>
  </template>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { appStore } from "../store/index";
const store = appStore();
const log = console.log;
log(`store =`, store);

const updateMsg = () => {
  store.$patch({
    msg: "Hello Pinia 🍍!",
  });
  // store.updateMsg('Pinia 🍍');
}

let jsonString = ref('');
const url = `https://cdn.xgqfrms.xyz/json/cat.json`;
// async await
store.fetchData(url).then(json => {
  jsonString.value = JSON.stringify(json, null, 4);
});

</script>

{
  "name": "vue3-ts-pinia",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "pinia": "^2.0.13",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.2",
    "vue-tsc": "^0.29.8"
  }
}

1. run npm run dev and open http://localhost:3000/

What is expected?

Pinia panel exists on vue devtools and works well ✅

What is actually happening?

Pinia panel does not exist on vue devtools ❌

---