[Vuejs]-Display elements based on instantaneous change and full or empty input on vue js

Below code should help.

   <template>
      <div id="app">
       <form class="myform">
    
          <button @click.prevent="reset" v-if="search" type="reset" class="fill">Show when fill 
          </button>
          
          <button v-else  class="empty">Show when empty</button>
    
          <input v-model="search" type="search" class="myinput">
    
        </form>
      </div>
    </template>
   <script>
    export default {
      name: "App",
      data() {
        return {
          search: null,
        }
      },
      methods: {
        reset() {
          thid.search = null;
        }
      }

    };
    </script>