rest.php

<?php

function wpfi_rest_api_search_init() {
  register_rest_route( 'wpfi/v1', '/search', array(
    'methods'		=> 'GET',
    'callback'	=> 'wpfi_rest_api_search',
  ) );
}
add_action( 'rest_api_init', 'wpfi_rest_api_search_init' );

function wpfi_rest_api_search( $request ) {
	$data = array();

	if ( ! isset( $_GET['s'] ) ) {
		return $data;
	}

	$rest_controller = new WP_REST_Post_Types_Controller();

	$args = array(
		's'   				=> $_GET['s'],
		'no_found_rows'          	=> true,
		'cache_results'          	=> true,
		'update_post_term_cache' 	=> false,
	);

  $query = new WP_Query( $args );

  if ( $query->have_posts() ) {
  	while ( $query->have_posts() ) {
  		$query->the_post();

      		$item = $rest_controller->prepare_response_for_collection( $query->post );
      		$item->link = get_the_permalink( $item->ID );
      		$data[] = $item;
  	}
  }

  return $data;
}

search.html

<div class="search">
  <div class="container">
    <a href="#" class="close"><?php echo file_get_contents( esc_url( get_theme_file_path( '/svg/close.svg' ) ) ); ?></a>
    <div class="search-input">
      <label for="search-field" class="screen-reader-text"><?php ask_e( 'Search: Search' ) ?>:</label>
      <input type="text" name="search-field" class="search-field" placeholder="<?php ask_e( 'Search: Type your search here' ) ?>..." />
    </div>
    <div class="search-results">
      <div class="items">
        <div class="item" v-bind:id="'result-' + result.id" v-for="(result, index) in results">
          <p><a v-bind:href="result.link" v-html="result.post_title">{{ result.post_title }}</a></p>
        </div><!-- .item -->
      <p class="notfound"><?php ask_e( 'Search: No results' ); ?>.</p>
      </div><!-- .items -->
    </div><!-- .search-results -->
  </div>
</div>

search.js

var search = new Vue({
  el: '.search',
  data: {
    results: []
  }
});

$('input.search-field').on('input', debounce(function() {
  	var search_str = $('input.search-field').val();

  	if ( search_str === '' ) {
  		$('.search').removeClass('no-results');
  		$('body').removeClass('search-active');
		$('.search .item').remove();
  	} else {
  		$.ajax({
			url: wpfi.rest_baseurl + 'wpfi/v1/search?s=' + search_str,
			}).done(function( response ) {
				$('.search .item').remove();

			  if( response.length !== 0 && response !== false ) {
          jQuery.each( response, function() {
            var self = this;
            search.results.push(this);
          } );

          $('body').addClass('search-active');
          $('.search').removeClass('no-results');
        } else {
         	$('body').addClass('search-active');
        	$('.search').addClass('no-results');
        }
			});
  	}
	}, 300 ));

	function debounce(func, wait, immediate) {
		var timeout;
		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			};
			var callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
			if (callNow) func.apply(context, args);
		};
	};