Code splitting javascript files in vue with webpack not working

Vue 3.5.11

I am using the pinia npm package to use stores in my vue app. I have been doing it the synchronous way:

<script setup>
 import { storeToRefs } from "pinia";
 import { usePhotoApi } from "@/composables/photos";
 const state = usePhotoApi();
 const { info, errored, loading } = storeToRefs(state);
  onMounted(()=>{
   Promise.all([state.getPhotos()]).then(() => {
    console.log("form fields are", info.value);
  });
})
</script>

My photos.js file is this:

  import { defineStore } from "pinia";

  export const usePhotoApi = defineStore("photos", {
    state: () => ({
      info: null,
      loading: true,
      errored: false
    }),
    actions: {
      async getPhotos() {
         //get my photos
    },
  });

This works fine, but it can be better optimized. I found this: https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/ and I now have the following:

<script setup>
  import { storeToRefs } from "pinia";
  const usePhotoApi = () => import("@/composables/photos.js");
  const state = await usePhotoApi()
  const { info, errored, loading } = storeToRefs(state);
  onMounted(()=>{
   Promise.all([state.getPhotos()]).then(() => {
    console.log("form fields are", info.value);
   });
  })

 </script>

Now, I get an error:

 state.getPhotos is not a function 

There are no other errors, just the one above. What is the correct syntax (or way) to call methods from my javascript using code splitting like the article outlines? Thanks