Populated options on select apear black at first but after changing tabs it shows okay

Question

I have a select component like this

<template>
  <div class="newsletter-launcher">
    <h2>Select a Newsletter to Launch</h2>
    <select v-model="selectedNewsletter" class="newsletter-select">
      <option v-for="(newsletter, index) in newsletters" :key="index" :value="newsletter.name">
        {{ newsletter.name }} ({{ newsletter.recipients }} recipients)
      </option>
    </select>
    <button @click="launchNewsletter" class="launch-button">Launch Newsletter</button>
    <p v-if="launchMessage" :class="['launch-message', { 'error-message': isError }]">
      {{ launchMessage }}
    </p>
  </div>
</template>

It is populated on the like this:

setup() {
  const newsletterStore = useNewsletterStore()
  const { newsletters } = newsletterStore

  onMounted(async () => {
    await newsletterStore.fetchNewsletters()
  })
  return {
    newsletters
  }
}

Also the newsletters variable is populated through the Pinia store:

export const useNewsletterStore = defineStore('newsletter', {
  state: (): NewsletterState => ({
    newsletters: []
  }),
  actions: {
    async fetchNewsletters() {
      try {
        const request_url = apiUrl + '/newsletters'
        const response = await axios.get<Newsletter[]>(apiUrl + '/newsletters', {
          headers: { Authorization: 'Bearer ' + apiToken }
        })
        this.newsletters = response.data
        console.log(request_url)
      } catch (error) {
        console.error('Error fetching newsletters:', error)
      }
    }
  }
})

When I try to select an option it shows no options and just black but after I change tabs (the blue texts on the top) and go back again to the launch it shows now the correct options

Before

After tabbing

Answer 1

Okay so I figured it out, not entirely sure why, but it was due to how I was populating the newsletter with the store. I replaced this line:

 const { newsletters } = newsletterStore

for

const newsletters = computed(() => newsletterStore.newsletters)