title: unable to do a .find() loop in vue js component on created
body: <p>I'm currently building a simple app with Vue js (and learnign it by the same occasion).</p>
  <p>Here is the app : <a href="https://osr-app-2a8b6.web.app/" rel="nofollow noreferrer">https://osr-app-2a8b6.web.app/</a></p>
  <p>So when you are on the homepage that displays the list of events and then click on details, you end up on the single page of the event, that works perfectly, but when you load that single page without navigating to it (just reload the page), nothing is showing and I've got an</p>
  <pre><code>Uncaught (in promise) TypeError: Cannot read property 'content' of undefined
  </code></pre>
  <p>which I don't have when navigating.</p>
  <p>So here is the my router code :</p>
  <pre><code>const router = createRouter({
      history: createWebHistory(),
      routes: [
          {name: 'home', path: '/', component: Home},
          {name: 'fav', path: '/favoris', component: FavoriteEvents},
          {name: 'single-event', path: '/:eventId', component: SingleEvent}
      ]
  });
  </code></pre>
  <p>and my component :</p>
  <pre><code>&lt;script&gt;
      import SingleCta from './SingleCta.vue';
      import SingleHeader from './SingleHeader.vue';
      import PartnerList from './PartnerList.vue';
      import GalleryCarousel from './GalleryCarousel.vue';
      import TheProgram from './TheProgram.vue';
      import DropdownList from './DropdownList.vue';
      
      export default {
          components: {
              SingleCta,
              SingleHeader,
              PartnerList,
              GalleryCarousel,
              TheProgram,
              DropdownList,
          },
          data() {
              return {
                  singleEvent: '',
                  title: '',
                  serieType: '',
                  day: '',
                  time: '',
                  date: '',
                  where: '',
                  dropDowns: [],
                  gallery: [],
                  partners: [],
                  people: [],
                  program: '',
                  description: '',
                  adProgram: {},
                  txtColor: '',
                  bgColor: ''
              }
          },
          computed: {
              singleEventClass(){
                  return 'page single-event ' + 'single-event--txt-' + this.txtColor + ' ' + 'single-event--bg-' + this.bgColor
              }
          },
          created() {
              const eventId = this.$route.params.eventId;
              const selectedEvent = this.$store.state.events.find(event =&gt; event.id === eventId);
  
              console.log(eventId) // return rhapsody-in-blue
              console.log(this.$store.state.events) // return my array with 3 events
              console.log(selectedEvent) // return undefined WHY???
  
              const selectedEventContent = selectedEvent.content;
              
              console.log(selectedEventContent) // return undefined WHY???
  
              this.singleEvent = selectedEvent;
              this.title = selectedEvent.title;
              this.serieType = selectedEvent.serieType;
              this.day = selectedEvent.day;
              this.date = selectedEvent.date;
              this.time = selectedEvent.time,
              this.where = selectedEvent.where,
              this.bgColor = selectedEvent.bgColor,
              this.txtColor = selectedEvent.txtColor,
              this.dropDowns = selectedEventContent.dropDowns;
              this.gallery = selectedEventContent.gallery
              this.partners = selectedEventContent.partners
              this.people = selectedEventContent.people
              this.program = selectedEventContent.program
              this.description = selectedEventContent.description
              this.adProgram = selectedEventContent.adProgram
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>the problem seems to be here:</p>
  <pre><code>const selectedEventContent = selectedEvent.content;
  </code></pre>
  <p>it returns me undefined :</p>
  <pre><code>TypeError: Cannot read property 'content' of undefined
  </code></pre>
  <p>but you can see that just before I'm logging the eventId and that returns the correct event ID:</p>
  <pre><code>rhapsody-in-blue
  </code></pre>
  <p>and also I'm logging the this.$store.state.events</p>
  <p>which returns my events array :</p>
  <pre><code>Proxy {}
  [[Handler]]: Object
  [[Target]]: Array(3)
  0: {bgColor: &quot;pink&quot;, content: {…}, date: &quot;30.09.20&quot;, day: &quot;mercredi&quot;, id: &quot;rhapsody-in-blue&quot;, …}
  1: {bgColor: &quot;pink&quot;, content: {…}, date: &quot;23.09.21&quot;, day: &quot;jeudi&quot;, id: &quot;hommage-a-armin-jordan&quot;, …}
  2: {bgColor: &quot;black&quot;, content: {…}, date: &quot;18.09.21&quot;, day: &quot;samedi&quot;, id: &quot;septembre-musical-montreux&quot;, …}
  length: 3
  [[Prototype]]: Array(0)
  [[IsRevoked]]: false
  </code></pre>
  <p>So why is the .find() loop on that array return me undefined?</p>
  <p>Again that works when navigating but not on load.</p>