JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--Font Awesome Icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container">
    <a class="navbar-brand" href="#">
        <img src="css/logo.png" width="100" alt="">
    </a>
    <form>
        <input type="text" class="text" v-model="search" placeholder="Search" aria-label="Search" style="margin-left: 20px; margin-right: 20px;">
        <ul> <!-- And this list should be hidden if searchResult != search.valueOf() -->
            <li v-for="searchResult in filteredName">
                <a href={{ searchResult.href }}><img src={{ searchResult.img }}><!-- next code doesn't work and cracks all list of searchResult[] --> {{ searchResult.title }}</a>
            </li>
        </ul>
    </form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Rubik');

body {
    color: #282828;
    font-family: 'Rubik', sans-serif;
}

a {
    color: #333333;
}

.info {
    background-color: #E9E9E9;
}

.text {
    outline: none;
    border-top: none;
    border-right: none;
    border-left: none;
}

.text:hover {
    outline: none;
    border-top: none;
    border-right: none;
    border-left: none;
    border-color: #282828;

}

.text:hover::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #282828;
    opacity: 1; /* Firefox */
}

.text:hover:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #282828;
}

.text:hover:-ms-input-placeholder { /* Microsoft Edge */
    color: #282828;
}

.text:focus {
    outline: none;
    border-top: none;
    border-right: none;
    border-left: none;
    border-color: #282828;

}

.text:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #282828;
    opacity: 1; /* Firefox */
}

.text:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #282828;
}

.text:focus:-ms-input-placeholder { /* Microsoft Edge */
    color: #282828;
}

ul {
    list-style-image: url('');
    list-style-type: none;
}

JavaScript

new Vue({
        el: '#app',
        data() {
            return {
                searchResult: [],
                search: '',
                //allOK: searchResult.name === search.valueOf()
        }
        },


        created: function() {
            this.searchResult = [
                {title: 'abc', img: 'url'},
                {title: 'abcd', img: 'url'},
                {title: 'test', img: 'url'}
            ];
        },

        computed: {
            filteredName: function() {
                return this.searchResult.filter((x) => {
                    return x.title.match(this.search)
                });
            }
        }
    });