I have a specific instance in which Vue is unable to pickup changes to data from a Pinia store that was fetched.

The code I am using worked previously I had only made some changes to the backend but as you can see below backend serves the correct data so that should not be an issue.

I have a simple Pinia store which like this :

import { defineStore } from 'pinia'

export const CategoryStoreDef = defineStore('categories', {
    state: () => ({
       categories: [],
       initialized: false
    }),

    actions: {
       async fetch() {
          // GET
          const res = await api.categories.get()

          // Assign
          this.categories = res.categories || []

          console.log('Fetched categories:', this.categories)
       },

       reset() {
          // Preserve reactive reference & watchers
          const defaults = factory()

          this.categories = defaults

          // Mark
          this.initialized = false

          // Log
          console.info('Reset categories:', this.categories)
       }
    }
})

/**
 * Helper - auto fetch
 *
 * Instantiates store and fetches automatically.
 */
let store
export function CategoryStore(fetch = true) {
    // Instantiate
    if (!store) {
       store = CategoryStoreDef()
    }

    init(fetch)

    function init(fetch) {
       // Guard
       if (store.initialized) return // Skip

       // Mark
       store.initialized = true

       if (fetch) {
          store.fetch()
       }
    }

    return store
}

It automatically protects itself against multiple instances being initiated. I have also verified that this is not the cause of the issue just to be sure. Additionally on initialization it automatically initiates the built-in fetch to fetch the data.

I should immediately point out that I am aware it is not awaiting the result through async/await. I am well aware of that thats intentional. Even if you await the result in the resulting popover where the data is shown the result is the same with or without an async/await. You open the popover and if the data doesn't exist you see nothing in the popover. Once the data is fetched it is updated inside fetch() to reflect in any component. I did exactly this in the past and never had issues with it.

Yet in this case it doesn't work. Here is a log that proves the fetch() receives the data.:

Fetched categories
Array(5) [ {…}, {…}, {…}, {…}, {…} ]
0: Object { Id: 1, Type: "Size", Ulid: "01HS7ZK3A9Q8M5Y2F4W6R1C8ND", … }
Id: 1
Options: Array(3) [ {…}, {…}, {…} ]
0: Object { Id: 1, Title: "Small", Value: "S", … }
Default: true
Id: 1
Title: "Small"
Ulid: "01HS80A1QK3X4M7P9R5F2C8JD"
Value: "S"
​​​​
: Object { … }
1: Object { Id: 2, Title: "Medium", Value: "M", … }
2: Object { Id: 3, Title: "Large", Value: "L", … }
length: 3
: Array []
Type: "Size"
Ulid: "01HS7ZK3A9Q8M5Y2F4W6R1C8ND"

: Object { … }
1: Object { Id: 2, Type: "Color", Ulid: "01HS7ZK3ABT4X9M7J2P5F6Q0RV", … }
2: Object { Id: 10, Type: "Shape", Ulid: "01HS7ZK3AD6C8Y1WQ9P2M5FTR", … }
3: Object { Id: 12, Type: "Sortiment", Ulid: "01HS7ZK3AFJ5M9Q6C8P2W1Y7R", … }
4: Object { Id: 13, Type: "Packaging", Ulid: "01HS7ZK3AH2F8M5Q9C1P6YWR", … }
length: 5

As you can see the data is received. So now we come into the component template :