title: Vue Pinia function is undefined in onMounted when unit test is ran
body: <p>I have a component and a Pinia store which contains a state and some actions. The code works perfectly fine in browser and in E2E (cypress) tests, but fail on unit tests. I'm using vue-testing-utils and vitest.</p>
  <p>The store function can be called fine from the unit test when the button is clicked, but if the function is in the mounted or main script, it fails the test</p>
  <p><strong>src/components/UsersComponent.vue</strong></p>
  <pre><code>&lt;script setup&gt;
  import { onMounted } from 'vue'
  import { useUsersStore } from '@/stores/users.store'
  
  const usersStore = useUsersStore()
  // usersStore.resetStatus() // &lt;- This fails in the unit test
  
  onMounted(() =&gt; {
    usersStore.resetStatus() // &lt;- This fails in the unit test
  })
  
  function changeStatus() {
    usersStore.changeStatus() // &lt;- This passes in the unit test
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div&gt;
      &lt;p&gt;Status: {{ usersStore.status }}&lt;/p&gt;
      &lt;button @click=&quot;changeStatus()&quot;&gt;Change Status&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>src/stores/users.store.js</strong></p>
  <pre><code>import { defineStore } from 'pinia'
  import { usersAPI } from '@/gateways'
  
  export const useUsersStore  = defineStore({
    id: 'users',
    persist: true,
  
    state: () =&gt; ({
      status: 'ready',
    }),
  
    getters: {},
  
    actions: {
      resetStatus() {
        this.status = 'ready'
      },
      changeStatus() {
        this.status = 'loading'
      },
    },
  })
  </code></pre>
  <p><strong>src/components/<strong>tests</strong>/UsersComponent.spec.js</strong></p>
  <pre><code>import { describe, it, expect, vi, beforeEach } from 'vitest'
  import { mount } from '@vue/test-utils'
  import { createTestingPinia } from '@pinia/testing'
  
  import UsersComponent from '@/components/UsersComponent.vue'
  import { useUsersStore } from '@/stores/users.store'
  
  const wrapper = mount(UsersComponent, {
    global: {
      plugins: [createTestingPinia({ createSpy: vi.fn() })],
    },
  })
  const usersStore = useUsersStore()
  
  describe('UsersComponent', () =&gt; {
    it('store function is called', async () =&gt; {
      // arrange
      const spy = vi.spyOn(usersStore, 'resetStatus')
      const button = wrapper.find('button')
  
      // act
      await button.trigger('click')
  
      // assert
      expect(spy).toHaveBeenCalled()
    })
  })
  </code></pre>
  <p>The unit tests return 2 different error. The first is a console log when the function tries to run in <code>onMounted()</code> and the second is what vitest returns.</p>
  <pre><code>stderr | unknown test
  [Vue warn]: Unhandled error during execution of mounted hook 
    at &lt;UsersComponent ref=&quot;VTU_COMPONENT&quot; &gt;
    at &lt;VTUROOT&gt;
  </code></pre>
  <pre><code> FAIL  src/components/__tests__/UsersComponent.spec.js [ src/components/__tests__/UsersComponent.spec.js ]
  TypeError: usersStore.resetStatus is not a function
   ❯ src/components/UsersComponent.vue:16:14
       16|
       17| &lt;template&gt;
       18|   &lt;div&gt;
         |  ^
       19|     &lt;p&gt;Status: {{ usersStore.status }}&lt;/p&gt;
       20|     &lt;button @click=&quot;changeStatus()&quot;&gt;Change Status&lt;/button&gt;
  </code></pre>
  <p>I know this example is a little basic and doesn't really serve a purpose, but I'm wondering how I can have store functions inside the <code>onMounted()</code> (or similar places) without it breaking all my unit tests.</p>