Hey guys so 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
    }
  },

When I try to select an option it show 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