<div id="keywords">
  <div class="search_box">
    <input type="text" v-model="search">
  </div>
  <ul>
    <li class="hoge" v-for="post in posts">
      <a :href="post.link">{{post.title.rendered ? post.title.rendered : '無題'}}</a>
    </li>
    <li class="hoge" v-for="post in filteredposts">
      <a :href="post.link">{{post.title.rendered ? post.title.rendered : '無題'}}</a>
    </li>
  </ul>
</div>
/* global axios, Vue, jQuery */
let count = 0;
let keywords = new Vue({
		el: '#keywords',
		count: '',
		data: {
			search: '',
			posts: []
		},
		created: function () {
      console.log('first'+count++);
      let vm = this;
				fetch('https://ja.wordpress.org/wp-json/wp/v2/posts?per_page=100')
					.then(function (response) {
						return response.json();
					})
					.then(function (data) {
						vm.posts = data;
					});
    },
		computed: {
			filteredposts: function() {
        console.log('filter'+count++);
				let vm = this;
				fetch('https://ja.wordpress.org/wp-json/wp/v2/posts?per_page=100&search='+this.search)
					.then(function (response) {
						return response.json();
					})
					.then(function (data) {
						vm.posts = data;
					});
			}
		}
	});
	keywords.count = 0;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js