Search.vue

<template>
  <div class="hello">
    <h1>Search</h1>
    <input v-model="term" type="search"> <button @click="search">Search</button>
    <div v-if="results">
      <ul>
        <li v-for="result in results" :key="result.Link">
          <a :href="result.Link" target="_new">{{result.API}}</a> - {{result.Description}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Search',
    data() {
      return {
        term:'',
        results:null
      }
    },
    methods: {
      search() {
        if(this.term.trim() === '') return;
        console.log('search for '+this.term);
        fetch(`https://api.publicapis.org/entries?title=${encodeURIComponent(this.term)}`)
          .then(res => res.json())
          .then(res => {
            console.log('results', res);
            this.results = res.entries;
          });
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>