How to watch the whole pinia state inside the store? - vuejs3

Question

I can't watch the whole pinia state inside the store. If I do it Vue js will show a next message: [Vue warn] Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead. I know about the tip in pinia documentation, but I can't do it inside the store.
My store:
export const achievementsKey = 'achievements'
export const missCountKey = 'missCount'
export const useAchievementStore = defineStore('achievement', () => {
const store = useStore()
const skinStore = useSkinStore()
const achievements = ref<Achievements>(
localStorage.getItem(achievementsKey)
? JSON.parse(<string>localStorage.getItem(achievementsKey))
: [
{
name: 'Get into the top ten',
prize: skinStore.skins[0],
done: false,
},
{ name: 'Miss 5 times', prize: 100, done: false },
{ name: 'Earn 2000 points', prize: 150, done: false },
{ name: 'Buy a new skin', prize: 150, done: false },
]
)
const missCount = ref(
localStorage.getItem(missCountKey)
? Number(localStorage.getItem(missCountKey))
: 0
)
function accomplish(achievement: Achievement): void {
achievement.done = true
if (typeof achievement.prize === 'number') {
store.balance += achievement.prize
}
}
watch(
achievements,
() => {
localStorage.setItem(achievementsKey, JSON.stringify(achievements.value))
},
{ deep: true }
)
watch(missCount, () => {
/** Accomplish an achievement */
if (missCount.value >= 5) {
const achievement = achievements.value.find(
(item) => item.name === 'Miss 5 times'
)
if (achievement && !achievement.done) {
accomplish(achievement)
}
}
localStorage.setItem(missCountKey, JSON.stringify(missCount.value))
})
return { achievements, missCount, accomplish }
})
// Show a vue warn
// const achievementStore = useAchievementStore()
// watch(
// achievementStore,
// (state) => {
// localStorage.setItem('piniaState', JSON.stringify(state))
// },
// { deep: true }
// )