Vue 3 Essentials - Watch

SetupWithWatch.vue

<template>
  <div>
    Search for <input v-model="searchInput" />
    <div>
      <p>Number of events: {{ results }}</p>
    </div>
  </div>
</template>

<script>
  import { ref, watch } from "@vue/composition-api";
  import eventApi from "@/api/event.js";

  export default {
    setup() {
      const searchInput = ref("");
      const results = ref(0);

      // This only runs once!
      // So move it into watch 👇
      // results.value = eventApi.getEventCount(searchInput.value);

      watch(() => {
        results.value = eventApi.getEventCount(searchInput.value);
      });

      return { searchInput, results };
    }
  }
</script>