JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
   <!-- lets start with one filter (to keept it clean) -->
   <input type="text" v-model="experienceSearch"/>

   <ul class="result-list">
     <li v-for="result in candidatelist">{{ result.name }}</li>
   </ul>
</div>

JavaScript

window.data = {candidates: [
{ name: 'John', experience: 'A' },
{ name: 'Doe', experience: 'A' },
{ name: 'Test', experience: 'B' },
{ name: 'Asd', experience: 'C' },
]};

new Vue({
  el: '#app',
  // always init your v-model bound props in data
  // usually you wouldn't take the candidates from the window prop. However, to keep it easy for you here I will stick to this
  data: function() {
    return {
       experienceSearch: '',
       candidates: window.data.candidates
    }
  },

  // the list that is displayed can be defined as computed property. It will re-compute everytime your input changes
  computed: {
    candidatelist: function() {
       // now define how your list is filtered
       return this.candidates.filter(function(oCandidate) {
          var matches = true;

          if (this.experienceSearch) {
             if (oCandidate.experience != this.experienceSearch) {
                matches = false;
             }
          }
          
          // here you can define conditions for your other matchers

          return matches;
       }.bind(this));
    }
  }
});