title: Vue computed issues with accessing API search results
body: <p>I created an Anime Search App with Vue.js using the new script setup. I am fetching data from an API and I would like to display the number of search results displayed. Currently I am having trouble figuring out how to access those results. I have it displaying &quot;50&quot; for each result at the moment, but it is connected to the API's original data I believe. It is not connected to my search results for the title of each anime. I would like to display the number of titles shown. Can someone help me figure this out please? I am a beginner to Vue and JS in general. Thank you very much!</p>
  <p>Code for my search page:</p>
  <pre><code> &lt;template&gt;
      &lt;header&gt;
              &lt;div class=&quot;img-scroll img&quot;&gt;
        &lt;h1&gt;Anime Search&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/header&gt;
              &lt;main class=&quot;animeSearch&quot;&gt;
              &lt;form class=&quot;search-box&quot; @submit.prevent=&quot;HandleSearch&quot;&gt;
                      &lt;input 
                          type=&quot;search&quot; 
                          class=&quot;search-field&quot; 
                          placeholder=&quot;Search for an anime...&quot;
                          required
                          v-model=&quot;search_query&quot; /&gt;
                  &lt;/form&gt;
                  &lt;p&gt;{{ resultCount }} results!&lt;/p&gt;
                  &lt;Swiper :slides-per-view=&quot;4&quot; :space-between=&quot;50&quot; class=&quot;cards&quot; v- 
        if=&quot;animelist.length &gt; 0&quot;&gt;
                  &lt;SwiperSlide class=&quot;card&quot; v-for=&quot;anime in animelist&quot; 
                          :key=&quot;anime.mal_id&quot;
                          :anime=&quot;anime&quot;&gt;
                      
              &lt;a :href=&quot;anime.url&quot; target=&quot;_blank&quot;&gt;
                  &lt;img 
                      :src=&quot;anime.image_url&quot; 
                      :alt=&quot;anime.title + ' Poster'&quot; 
                  /&gt;
                  &lt;h3&gt;{{ anime.title }}&lt;/h3&gt;
              &lt;/a&gt;
          &lt;/SwiperSlide&gt;
                  &lt;/Swiper&gt;
                  &lt;div class=&quot;no-results&quot; v-else&gt;
                      &lt;h3&gt;Type in an Anime and hit 'enter' for search results.&lt;br&gt;
                      Use your cursor to swipe through images.&lt;br&gt;
                      Click on the image for information about the anime.&lt;br&gt;
                      Happy searching!...&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/main&gt;
               &lt;footer&gt;
        &lt;p&gt;&amp;copy Megan Louise 2022&lt;/p&gt;
        &lt;/footer&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
      import { ref } from 'vue';
      import { Swiper, SwiperSlide } from &quot;swiper/vue&quot;;
      import { computed } from &quot;vue&quot;;
      import &quot;swiper/css&quot;;
      export default {
        components: {
          Swiper,
          SwiperSlide,
        },
          setup() {
              const onSwiper = (swiper) =&gt; {
              console.log(swiper);
              };
              const search_query = ref(&quot;&quot;);
              const animelist = ref([]);
              const HandleSearch = async () =&gt; {
                  animelist.value = await fetch(`https://api.jikan.moe/v3/search/anime? 
        q=${search_query.value}`)
                      .then(res =&gt; res.json())
                      .then(data =&gt; data.results);
                  search_query.value = &quot;&quot;;
              };
              const onSlideChange = () =&gt; {
              console.log('slide change');
              };
              const resultCount = computed(() =&gt; {
                  return animelist.value.length;
                  console.log('resultCount');
          });
              return {
                  search_query,
                  animelist,
                  HandleSearch,
                  onSwiper,
                  resultCount,
                  onSlideChange
              };
          },
      }
      &lt;/script&gt;
  
      &lt;style scoped&gt;
      input[type='search'] {
      font-family: 'BIZ UDGothic', sans-serif;
      background-color: black;
      border: 2px solid #FD8721;
      color: #FD8721;
      width: 100%;
      height: 40px;
      padding: 5px;
      max-width: 600px;
      border-radius: 8px;
      margin-bottom: 40px;
      font-size: 22px;
      }
      h3 {
      color: #ECC013;
      text-shadow: 1px 1px #FD8721;
      font-weight: 400;
      }
      .cards {
          display: flex;
          flex-wrap: wrap;
          margin: 10px 40px;
          justify-content: space-evenly;
          cursor: pointer;
          }
      
      .card {
      width: 100%;
      max-width: 200px;
      height: auto;
      padding: 0px 8px;
      margin-bottom: 16px;
      }
      img {
          cursor: grab;
          width: 100%;
          height: 300px;
          object-fit: cover;
          border-radius: 16px;
          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
          transition: 0.4s;
          border: 2px solid #BA1039;
      }
      img:hover {
              transform: scale(1.05);
          }
      @media only screen and (max-width: 820px) { 
      h1 {
      font-size: 3em;
      }
      }
      &lt;/style&gt;
  </code></pre>