title: How to set up conditionals in setup function in Vue 3 Composition API
body: <p>I am attempting to build a basic Vue 3 app with composition API that enables the user to guess an audible musical note by selecting buttons displaying 4 randomly shuffled musical notes from a selection of 7 notes (A,B,C,D,E,F,G). The first part of the setup function, under <code>// Handle Audio</code> passes 7 musical notes (imported as mp3 clips in assets) into an array called <code>audioArray</code>. The notes in audioArray are then shuffled in <code>shuffleAudio</code>, then passed to <code>audio.value</code>. The audio is played when the user clicks &quot;click for audio&quot;, and reshuffled with the <code>onBeforeMount</code> life cycle hook. Meanwhile, under <code>// handleLetters</code>, each of the four buttons are configured to display a letter corresponding to a musical note, which are shuffled when <code>shuffleLetter</code> is called by <code>onBeforeMount</code>.</p>
  <p>I am now trying to get the buttons to trigger &quot;correct&quot; and &quot;incorrect&quot; messages when the user selects  either the correct or incorrect note. To do this, I tried setting up the buttons with click events (ex. handleSelectOne, handleSelectTwo...etc.). For example, in handleSelectOne, if the button note displayed is &quot;A&quot; and the musical note playing is noteA, then the message displayed is 'CORRECT' when the user taps the &quot;A&quot; button, else 'INCORRECT'. However, I tried putting a breakpoint on handleSelectOne, but the event isn't triggered upon selecting A when noteA is played. Meanwhile, I am not sure if my conditional is setup correctly. How can I set up the logic in handleSelectOne to respond correctly if the button letter is A and corresponds to the note being played?</p>
  <p>Here is my code so far:</p>
  <p>template</p>
  <pre><code>&lt;template&gt;
    &lt;div div class=&quot;flex justify-center&quot;&gt;
      &lt;button @click=&quot;handleAudio&quot;&gt;Click for Audio&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex justify-center&quot;&gt;
      &lt;button @click=&quot;handleSelectOne&quot;&gt;{{ letters.letterDisplayOne }}&lt;/button&gt;
      &lt;button @click=&quot;handleSelectTwo&quot;&gt;{{ letters.letterDisplayTwo }}&lt;/button&gt;
      &lt;button @click=&quot;handleSelectThree&quot;&gt;{{ letters.letterDisplayThree }}&lt;/button&gt;
      &lt;button @click=&quot;handleSelectFour&quot;&gt;{{ letters.letterDisplayFour }}&lt;/button&gt;
      &lt;button @click=&quot;handleSelectNone&quot;&gt;None&lt;/button&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;h1&gt;{{ message }}&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>script</p>
  <pre><code>&lt;script&gt;
  import { ref, reactive, onBeforeMount } from 'vue';
  const noteA = require(&quot;../assets/note-a.mp3&quot;)
  const noteB = require(&quot;../assets/note-b.mp3&quot;)
  const noteC = require(&quot;../assets/note-c.mp3&quot;)
  const noteD = require(&quot;../assets/note-d.mp3&quot;)
  const noteE = require(&quot;../assets/note-e.mp3&quot;)
  const noteF = require(&quot;../assets/note-f.mp3&quot;)
  const noteG = require(&quot;../assets/note-g.mp3&quot;)
  
  export default {
    name: 'Button',
    components: {},
    setup() {
  
  // Handle Audio
      const audioArray = ref([noteA, noteB, noteC, noteD, noteE, noteF, noteG])
      const audio = ref(audioArray.value)
  
      const shuffleAudio = () =&gt; {
        audioArray.value = audioArray.value.sort(() =&gt; 0.5 - Math.random())
      }
      
      const handleAudio = () =&gt; {
        audio.value = new Audio(audioArray.value[0]);
        audio.value.play()
        console.log(audioArray.value)
      }
  
  // Handle Letters
      const letters = reactive({
        letterDisplayOne: '',
        letterDisplayTwo: '',
        letterDisplayThree: '',
        letterDisplayFour: ''
      })
  
      const letterArray = ref(['A','B','C','D','E','F','G'])
  
      const shuffleLetter = () =&gt; {
        letterArray.value = letterArray.value.sort(() =&gt; 0.5 - Math.random())
      }
  
      const handleLetterArray = () =&gt; {
        letters.letterDisplayOne = letterArray.value[0]
        letters.letterDisplayTwo = letterArray.value[1]
        letters.letterDisplayThree = letterArray.value[2]
        letters.letterDisplayFour = letterArray.value[3]
      }
  
  // Handle message
      const message = ref('')
  
      const handleSelectOne = () =&gt; {
        if (letters.letterDisplayOne === 'A' &amp;&amp; audio.value === audioArray.value[noteA]) {
          message.value = 'CORRECT!!!!'
        } else {
          message.value = 'INCORRECT!!!!'
        }
      }
  
      const handleSelectTwo = () =&gt; {
        // functionality for handleSelectTwo
      }
  
      const handleSelectThree = () =&gt; {
        // functionality for handleSelectThree
      }
  
      const handleSelectFour = () =&gt; {
        // functionality for handleSelectFour
      }
  
      const handleSelectNone = () =&gt; {
        // functionality for handleSelectNone
      }
  
      onBeforeMount(() =&gt; {
        shuffleAudio()
        shuffleLetter()
        handleLetterArray()
      })
  
      return {
        audioArray,
        shuffleAudio,
        audio,
        handleAudio,
        letters,
        letterArray,
        shuffleLetter,
        handleLetterArray,
        message,
        handleSelectOne,
        handleSelectTwo,
        handleSelectThree,
        handleSelectFour,
        handleSelectNone
      }
    }
  }
  </code></pre>